Reactive forms support

[hdeshev]

Just adding selectors for Control[formControlName] thanks to @clarenceh's excellent work in #526.

[ScottMGerstl]

Was this in the 2.5 release?

[kinggolf]

@ScottMGerstl I just tried this using NS 2.5 and it appears to work. Thank you @hdeshev and @clarenceh!

[Serge-SDL]

Hello !

I have been unsuccessfully trying for 2 days to implement reactive form in Nativescript.

I have just written a simple component :

    export class HeroDetailComponent {
      name = new FormControl();
    }

with a simple template :

    <Label text="Hero Detail"></Label>
    <TextField [formControl]="name"></TextField>
    <Label text="{{ name.value | json }}"></Label>
    <Label text="{{ name.status | json }}"></Label>

-> I have the error "Error: No value accessor for form control with unspecified name attribute"

if I change the textfield row to add ngDefaultControl :
<TextField [formControl]="name" ngDefaultControl></TextField>

it works BUT there is no synchronisation, if I fill the form on app, {{ name.value }} still displays null

Did I miss something ?? Do you have some working code ?

Thanks !
serge

[ScottMGerstl]

Hi serge,

I have successfully implemented. I can share some code with you this weekend.

Regards,
Scott M Gerstl

[kinggolf]

@sd-lab I use a formGroup around the TextField with formControlName rather than [formControl].
Something like:

    <Label text="Hero Detail"></Label>
    <GridLayout [formGroup]="form">
        <TextField formControlName="name"></TextField>
    </GridLayout
    <Label text="{{ form.value | json }}"></Label>

Here is a gist of an entire login form: https://gist.github.com/kinggolf/e48c6c8f72d570922bf3606b14bf08b4

I found this video to be very helpful: https://www.youtube.com/watch?v=xYv9lsrV0s4

Good luck.

[Serge-SDL]

Thank you both for your fasts answers !

I have allready try this code:

export class HeroDetailComponentGroup {
  heroForm: FormGroup; // <--- heroForm is of type FormGroup

  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }

  createForm() {
    this.heroForm = this.fb.group({
      name: ['', Validators.required ],
    });
  }
}

with this template:

<StackLayout [formGroup]="heroForm">
    <TextField formControlName="name"></TextField>
</StackLayout>

<Label text="{{ heroForm.value | json }}"></Label>
<Label text="{{ heroForm.status | json }}"></Label>

but have got this error:
No value accessor for form control with name: 'name'

it works perfectly fine with the same code on angular without native script.
@kinggolf: sorry but I don't know how to run your code exemple, it looks to have some dependencies... I watched the vide, quite interresting but just angular

@ScottMGerstl: still interested by your code !

serge

[kinggolf]

@sd-lab What version of NativeScript are you using?

[Serge-SDL]

Hi,

I restarted from scratch to be sure not to have missed anything !
Start by lauching commands:

tns create form-test --template nativescript-template-ng-tutorial
cd form-test
tns run android

-> lauch app, everything fine

create file app/hero-detail.component.ts with code:

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

@Component({
  selector: "hero-detail",
  template: `
    <StackLayout [formGroup]="heroForm">
        <TextField formControlName="name"></TextField>
    </StackLayout>
  `
})
export class HeroDetailComponent {
    public heroForm: FormGroup;

    constructor(private fb: FormBuilder){
        this.heroForm = this.fb.group({
            "name": ["", [Validators.required]]
        });
    }
}

change my app.module.ts (add ReactiveFormsModule and HeroDetailComponent) to:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { ReactiveFormsModule } from '@angular/forms'; 

import { AppComponent } from "./app.component";
import { HeroDetailComponent } from './hero-detail.component';

@NgModule({
  declarations: [AppComponent, HeroDetailComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, ReactiveFormsModule],

  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

and my app.component.ts to:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <ActionBar title="My App"></ActionBar>
    <hero-detail></hero-detail>
  `
})
export class AppComponent {
  // Your TypeScript logic goes here
}

my package.json file look like :

"nativescript": {
   "id": "org.nativescript.formtest",
   "tns-android": {
     "version": "2.5.0"
   }
 },
 "dependencies": {
   "@angular/common": "2.4.3",
   "@angular/compiler": "2.4.3",
   "@angular/core": "2.4.3",
   "@angular/forms": "2.4.3",
   "@angular/http": "2.4.3",
   "@angular/platform-browser": "2.4.3",
   "@angular/platform-browser-dynamic": "2.4.3",
   "@angular/router": "3.4.3",
   "nativescript-angular": "1.4.0",
   "nativescript-theme-core": "~1.0.2",
   "reflect-metadata": "~0.1.8",
   "rxjs": "~5.0.1",
   "tns-core-modules": "2.5.0"
 },

still have the error:
Error: No value accessor for form control with name: 'name'

[Serge-SDL]

Ok, got the answer elsewhere:
just missed to import NativeScriptFormsModule
rookie mistake 👎