How to do databinding with nativescript-pro-ui

databinding

#1

I cannot do databinding with nativescript-pro-ui, had done that with simple html fields. Iam really stuck up with this situation, any help will be commendable, thanks and regards Arun

This is my UI

<StackLayout>
   <RadDataForm #myCommitDataForm [source]="feedback">
     <TKEntityProperty tkDataFormProperty name="name" displayName="displayName" index="1">
     </TKEntityProperty>
   </RadDataForm>
   <Button class="company-update-button" text="Update" (tap)="onTap()"></Button>
</StackLayout>

And my ts


onTap(){
      console.log("-------------");
      console.log("Submitted data should shown here");
      console.log("-------------");
}

#2

Hi @arunwrc,
The DataForm doesn’t have a 2-way binding out of the box, however there is a way to achieve that.

I presume that your @Component has a feedback object, so to print its values, you just need to call:

console.log( JSON.stringify(this.feedback) );

This should print out all the values that are inside the feedback object, which automatically should be the values in the form.

If you want to clear the form or update the values in the form from TypeScript, then you need to create a new feedback object and assign it to this.feedback, like this:

this.feedback = { name: 'new name', otherfields: 'xyz' }

However this is not going to update the form:

this.name = 'new name';

Here is a full example (see the profile component):

Let me know if this is what you were after.

Enjoy,
Sebastian


#3

@sebawita, it doesnt work for me on first time, anyways got a spark, let you know the result for sure, and a thanks a load for your effort. Good work