RadDataForm - Provide the Source
This article will guide you through the process of adding a
RadDataForm
instance to a page in a {N} + Angular application and using it
to edit the properties of a business object.
Create the Source Object
In order to use RadDataForm
to edit an object, we
need to have the object that we will edit. In this example, we
will create a class Person
, pass an instance of
this class to RadDataForm
and then we will be able
to edit the person's properties.
Example 1: Declare the object that we will use as a source for RadDataForm
export class Person {
public name: string;
public age: number;
public email: string;
public city: string;
public street: string;
public streetNumber: number;
constructor(name: string, age: number, email: string, city: string, street: string, streetNumber: number) {
this.name = name;
this.age = age;
this.email = email;
this.city = city;
this.street = street;
this.streetNumber = streetNumber;
}
}
Add RadDataForm to the Page
Before proceeding, make sure that the
NativeScriptUIDataFormModule
from the nativescript-ui-dataform plugin has been
imported in an ngModule
in your app as explained
here.
After that simply add the
RadDataForm
tag to the HTML and set its
source
accordingly:
Example 2: Add RadDataForm to a page
<RadDataForm tkExampleTitle tkToggleNavButton [source]="person"></RadDataForm>
Note the
data binding
of the source
property of
RadDataForm
to the person
property of
our component. Let's add this property in the
@Component
'.ts' file and initialize it in the
ngOnInit
method:
Example 3: Define the property used for binding
import { Component, OnInit } from "@angular/core";
import { Person } from "../data-services/person";
@Component({
moduleId: module.id,
selector: "tk-dataform-getting-started",
templateUrl: "dataform-getting-started.component.html"
})
export class DataFormGettingStartedComponent implements OnInit {
private _person: Person;
constructor() {
}
ngOnInit() {
this._person = new Person("John", 23, "[email protected]", "New York", "5th Avenue", 11);
}
get person(): Person {
return this._person;
}
}
If you run the application now, you should see the default editor for each property of the provided source object.
Figure 1: The basic RadDataForm on Android (left) and iOS (right)
Our next step is to adjust the editors that are used for each of the source object's properties. Here's how.
References
Want to see these scenarios in action? Check our SDK Examples for Angular repo on GitHub. You will find these and many other practical examples with NativeScript UI.
Related articles you might find useful: