Check and Switch never moves to false

Thread is closed for posting
4 posts, 0 answers
  1. Douglas
    Douglas avatar
    16 posts
    Member since:
    Apr 2017

    Posted 26 Apr 2017 Link to this post

    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.

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 27 Apr 2017 Link to this post

    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 console 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.
  3. Douglas
    Douglas avatar
    16 posts
    Member since:
    Apr 2017

    Posted 27 Apr 2017 in reply to Nikolay Tsonev Link to this post

    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.

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 27 Apr 2017 Link to this post

    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 nativescript-ui-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.
Back to Top