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
Add RadDataForm to the Page
References

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, "john@company.com", "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)

NativeScriptUI-DataForm-Getting-Started-Android

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.

NativeScript Angular