RadDataForm: Getting Started

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 "data item" like this:

NativeScriptUI-DataForm-Getting-Started-Android NativeScriptUI-DataForm-Getting-Started-iOS

Adding a DataForm to your page

First thing you need to do in order to use the DataForm 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 main "Getting Started" 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:

<RadDataForm tkExampleTitle tkToggleNavButton [source]="person"></RadDataForm>

Creating the data model

Now we need to create a data model with the object that we will edit with the help of the DataForm. Add a property in your @Component '.ts' file and initialize it in the ngOnInit method:

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;
    }
}
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;
    }
}

Note that we have bound the source property to an instance of our 'Person' data object. Now if you run the application, you should see the default editor for each property of the provided data object.

Adjusting the editors

Now that we have bound the DataForm to an data object from our @Component, we may need to fine tune it for example to use editors which may be more appropriate for our scenario.
This can be done by declaring attributes for an EntityProperty in the html file, through code or with a JSON file. This article demonstrates each of these methods.

References

Want to see this scenario in action?
Check our SDK examples for Angular repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: