RadDataForm Getting Started

In this article, you will learn to get started with the DataForm plugin for NativeScript: how to initialize the dataform.

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-dataform

Adding a RadDataForm to Your Component's template

Before proceeding, make sure that the NativeScriptUIDataFormModule from the nativescript-ui-dataform plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
        ....
        NativeScriptUIDataFormModule,
        ....
    ],
    declarations: [
        ....
    ]
})
export class DataFormExamplesModule { }

Demo.

Let's start with the Component in which we will place our RadDataForm instance.

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

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

Demo