FormBuilder to nativescript

[AyWa]

Hello everyone,

I used FormBuilder to my webapps, and now I am trying to use it to nativescript but I thinks it’s not possible because FormBuilder need an input.
Is it possible to make it works?

thanks

[VladimirAmiorkov]

Hi @AyWa ,

Can you share with us which FormBuilder application or service you are referring to so that we can take a closer look at the specifics of it. We do have a dedicated RadDataForm that is coming to {N} + Angular in the next official release (1.5.0) of nativescript-telerik-ui-pro plugin which has been designed and developed to work and feel as all {N} components on both iOS and Android. You can take a look at our non Angular online documentation for more information regarding the RadDataForm component, the Angular 2 support as stated above is coming in a couple of days.

Keep in mind that NativeScript + Angular uses the well know web technology that we love but there is a difference in what is the end result, in web or hybrid technology the end result will be a WebView + HTML elements, in NativeScript you get truly native components which is the power of {N}. Having this in mind using a pure web HTML tools for creation of UI is not possible without embedding them inside the {N} application via WebViewer which has poor performance and does not create native components.

[NathanWalker]

@VladimirAmiorkov pretty sure @AyWa is referring to ReactiveFormsModule FormBuilder:
https://github.com/angular/angular/blob/2.1.2/modules/%40angular/forms/src/form_providers.ts#L26-L38
http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

I have been wanting to submit a PR to make that API work with nativescript-angular. Should be doable and I've heard many people desiring same thing.

[AyWa]

@VladimirAmiorkov @NathanWalker Yeah exactly, I am talking about ReactiveFormsModule FormBuilder

[clarenceh]

Hi everyone,

I have developed Angular2 for web for some time, and starts to explore NativeScript with Angular2.

I found this feature (NativeScript to support Angular2 Reactive Forms Module) is of great potential and really can help to simplify the development of form-base input page that requires more sophisticate data model processing and validation.

Base on my understanding, the key thing to do to integrate with Reactive Forms Module is to implement Angular Form module's ControlValueAccessor interface. Which I found in nativescript-angular, the class base-value-accessor.ts already is doing this (it's also needed to support the [(ngModel)] binding).

From the text-value-accessor.ts class, I found it has the following line:
selector: "TextField[ngModel], textField[ngModel], text-field[ngModel], TextView[ngModel], textView[ngModel],

So it only support the NativeScript UI fields with the ngModel directive.

The ideal way is also to have it support the binding of a FromControl in the component. For example, instead of the following NS currently support:
<TextField #usernameContainer id="username" class="mek-input" autocorrect="false" autocapitalizationType="none" [(ngModel)]="login.username" updateTextTrigger="focusLost" returnKeyType="next"> </TextField>

I can write something like the following (just like the web version):
<TextField #usernameContainer id="username" class="mek-input" autocorrect="false" autocapitalizationType="none" formControlName="username" returnKeyType="next"> </TextField>

Note that the directive formControlName is used instead of the [(ngModel)] binding

And then in the component code, I can use Angular's FormBuilder to create the control programmatically:
this.username = new FormControl(this.login.username, [Validators.required, Validators.minLength(3), Validators.maxLength(40)]);

Afterwards, the TextField will then "binded" to the FormControl, and Angular will take care of the data binding, validation, update the control's states (i.e. dirty, touched, valid, etc.), and others.

This way can make the experience much more align with the web development flow and have the following benefits:

• Validation logic can be defined in the component code (custom validator also possible)
• Additional processing of data model become much easier
• I can subscribe to the FormControl's valueChanges event
• Testing can be implemented much more easily

I think this feature can definitely help developers who is already adopting this Data Model Driven Form approach in developing web applications.

I am very happy to help contribute to this feature. But as I am not that familiar with nativescript-angular and the in-depth details of Angular2, I may need some hint and guidance from your team.

Any other comments are much welcome and I really want to see this feature available in NativeScript.

Cheers
Clarence

[hdeshev]

@clarenceh This looks great! Can you point me to an article describing what's needed for value accessors in order to support formControlName?

[clarenceh]

Hi @hdeshev,

The following is an excellent article which describes how to implement a custom Angular2 form control:
http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

As currently the text-value-accessor.ts and others were implemented as an Angular Directive, which has the selector hard-coded to TextField[ngModel]..., etc. I believe can simply change the selector text to the following and test it out:
selector: "TextField[ngModel],TextField[formControlName]...

To test whether it works, can simply test with the following:

• Create a project with tns
• Modify the file app.module.ts as follows:

    import { NgModule } from "@angular/core";
    import { NativeScriptModule } from "nativescript-angular/platform";
    import { NativeScriptFormsModule } from "nativescript-angular/forms";
    import { ReactiveFormsModule } from '@angular/forms';

    import { AppComponent } from "./app.component";

    @NgModule({
        declarations: [AppComponent],
        bootstrap: [AppComponent],
        imports: [
            NativeScriptModule,
            NativeScriptFormsModule,
            ReactiveFormsModule
        ]
    })
    export class AppModule { }

• In app.component.html, add a TextField and try to bind to a FromControl by name:

    <StackLayout class="p-20" [formGroup]="loginForm">
        <Label text="Tap the button" class="h1 text-center"></Label>
        <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
        <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
        <TextField formControlName="usernameControl"></TextField>
        <Label [text]="username" class="h2 text-center" textWrap="true"></Label>
    </StackLayout>

Note that we also need to add a FormGroup to the binding, Angular2 form will need this

• In app.component.ts, add logic to build the FormGroup and FormControl for the text field:

    import { Component, OnInit } from "@angular/core";
    import { AbstractControl, FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
    export class AppComponent {

        public counter: number = 16;

        loginForm: FormGroup;
        usernameControl: AbstractControl;
        username = '';

        constructor(private fb: FormBuilder) {}

        ngOnInit() {
            this.loginForm = this.fb.group({
                username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(40)]]
            });
            this.usernameControl = this.loginForm.controls['username'];
        }

        public get message(): string {
            if (this.counter > 0) {
                return this.counter + " taps left";
            } else {
                return "Hoorraaay! \nYou are ready to start building!";
            }
        }
        
        public onTap() {
            this.counter--;
            this.username = this.usernameControl.value;
        }
    }

Then test to run the application to see if it works or not.

Currently, when I run the above code, I got the following error:

CONSOLE ERROR file:///app/tns_modules/trace/trace.js:160:30: ns-renderer: Error in app.component.html:4:15 caused by: Cannot find control with name: 'usernameControl'

I believe as currently the text field value accessor doesn't pick up the attribute "formControlName", so the binding not work and Angular doesn't found any property with ControlValueAccessor implemented.

Hope this helps.
Clarence

[dave-calleja]

👍 on this, definitely a great addition to the codebase

[hdeshev]

I tried it out, and really the formControlName selector does the trick - my FormGroup got populated correctly. Pushed a PR with that.

[clarenceh]

Really glad to hear that and look forward for the NS 2.5 release so that we can start using it. Thanks a lot for the help.

[derekdon]

Is there a way to test this ahead of the release? I thought using the next tag as described here https://docs.nativescript.org/releases/running-latest might give me this functionality or npm linking to a master clone of the nativescript-angular repo but neither seemed to work.