This is a migrated thread and some comments may be shown as answers.

Check and Switch never moves to false

3 Answers 60 Views
DataForm
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Douglas
Top achievements
Rank 1
Douglas asked on 26 Apr 2017, 06:45 PM

I have a model with a boolean:

hasActivation: boolean;

 

I have a data form with
<TKEntityProperty tkDataFormProperty name="hasActivation" displayName="Do you have an activation code?" index="6">
</TKEntityProperty>

 

I'm testing on Android, using the latest version with Angular.

 

Once the model.hasActivation gets set to true, it never goes back to false when you uncheck the checkbox. I tried a switch and see the same problem.

3 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 27 Apr 2017, 08:50 AM
Hi,
Thank you for your interest in UI for NativeScript.
I reviewed this case on my side while using DataForm component and Entity of type switch, however, the update of component's value seems to work as expected.

For your convenience, I am attaching sample code, which you could test on your side. In the sample project, I log in the the editedObject property of the DataForm component, which returns JSON object with the Entity name and value.

HTML 
<GridLayout rows="* auto" columns="">
    <RadDataForm #myCommitDataForm row="0" commitMode="Immediate" [source]="ticketOrder" tkExampleTitle tkToggleNavButton>
        <TKEntityProperty tkDataFormProperty name="movie" displayName="Movie Name" index="0" [valuesProvider]="movies">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="date" index="1">
            <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="time" index="2">
            <TKPropertyEditor tkEntityPropertyEditor type="TimePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <!-- >> angular-dataform-editors-html -->
        <TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
            <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
        </TKEntityProperty>
        <!-- << angular-dataform-editors-html -->
        <TKEntityProperty tkDataFormProperty name="price" index="4" readOnly="true">
            <TKPropertyEditor tkEntityPropertyEditor type="Decimal"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="numberOfTickets" displayName="Number of Tickets" index="5">
            <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactName" displayName="Contact Name" index="6">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactPhone" displayName="Contact Phone" index="7">
            <TKPropertyEditor tkEntityPropertyEditor type="Phone"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactEmail" displayName="Contact Email" index="8">
            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="agreeTerms" displayName="I Agree with Terms" index="9">
            <TKPropertyEditor tkEntityPropertyEditor type="Switch"></TKPropertyEditor>
        </TKEntityProperty>
    </RadDataForm>
    <Button row="1" text="review result" (tap)="onTap()"></Button>
     
</GridLayout>


TypeScript
import { Component, OnInit, ViewChild } from "@angular/core";
import { RadDataFormComponent } from "nativescript-telerik-ui-pro/dataform/angular";
 
@Component({
    moduleId: module.id,
    selector: "tk-dataform-editors",
    templateUrl: "dataform-editors.component.html"
})
export class DataFormEditorsComponent implements OnInit {
    private _ticketOrder: TicketOrder;
    private _movies: Array<String>;
    @ViewChild('myCommitDataForm') myCommitDataFormComp: RadDataFormComponent;
 
    constructor() { }
 
    ngOnInit() {
        this._ticketOrder = new TicketOrder();
        this._movies = new Array<String>();
        this._movies.push("Zootopia");
        this._movies.push("Captain America");
        this._movies.push("The Jungle Book");
    }
 
    get ticketOrder() {
        return this._ticketOrder;
    }
 
    get movies() {
        return this._movies;
    }
 
    onTap(){
        console.log("editedObject result");
        console.log(this.myCommitDataFormComp);
        console.log(this.myCommitDataFormComp.dataForm.editedObject);
 
    }
}
 
export class TicketOrder {
    public movie: string = "Zootopia";
    public date: string = "2016-04-06";
    public time: string = "20:00";
    public type: string = "2D";
    public price: number = 9.50;
    public numberOfTickets: number = 2;
    public contactName: string = null;
    public contactPhone: string = null;
    public contactEmail: string = null;
    public agreeTerms: boolean = false;
 
    constructor() {
    }
}


Something that I could suggest is to verify, whether you have set up the component's commitMode to `Immediate`, if not the changes will not be triggered. More about the commitMode property could be found here.

Regarding the ticket, if you still have a problem, please provide sample project, which could be debugged locally.

Thank you in advance for your cooperation.

Regards,
nikolay.tsonev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Douglas
Top achievements
Rank 1
answered on 27 Apr 2017, 01:10 PM

I was expecting the actual model object to get updated.  In your example, that would be the this._ticketOrder object.

Change your onTap to this:


onTap(){
console.log("editedObject result");
console.log(this.myCommitDataFormComp);
console.log(this.myCommitDataFormComp.dataForm.editedObject);
console.dump(this._ticketOrder);
}

 

Now update the agree to true.  Update the contact name.  Click results.  You will see the dataform object and _ticketOrder both are correct. 

Then, change the contact name and agree to false.  Click results.  You will see the contact name is correct on both objects.  But the boolean field only updates on the dataform object.  It does not update on the _ticketOrder object.

I can change my code to use the editedObject.  However, I think this is a defect because the updates appear to be two way with other fields.  If we aren't supposed to rely on two way updates to the model object, the documentation needs to be more clear.

0
Nikolay Tsonev
Telerik team
answered on 27 Apr 2017, 02:02 PM
Hello,
Thank you for your feedback.
Indeed two-way binding support for the Dataform component is a common scenario, however, this functionality is not supported for this component at this time.

For your convenience, I logged new feature request in the --feedback repository, where the other people could vote for this feature. Regarding that there you could also keep track on the issue for some further info.

In the meantime, you could change your code to use editedObject property, when you would like to handle the changed values for the Entities.

Let me know, whether this is applicable for your case.
Regards,
nikolay.tsonev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Tags
DataForm
Asked by
Douglas
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Douglas
Top achievements
Rank 1
Share this question
or