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
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
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.
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