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

First thing you need to do in order to use the RadDataForm in an HTML of your Angular component is to add the built-in Angular directives that come with the nativescript-telerik-ui plugin. For more details take a look at the Getting Started with Angular article.

Before adding RadDataForm for NativeScript, make sure you have installed Progress NativeScript UI Pro.

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 NativeScriptUI-DataForm-Getting-Started-iOS

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: