Angular reactiv form


#1

I have been unsuccessfully trying for 2 days to implement reactive form in Nativescript.
It should work from 2.5 Nativescript version :



but I can’t write a code that works…

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 ??

Thanks !
serge


#2

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'


#3

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


#4

Hi Serge, I’ve seen you had success on this.
I’m having a hard time to implement a reactive form in Nativescript. Can you point me to some tutorial or documentation from where I can learn how to do that?
thank you!


#5

Hi Gilberto !
Did you try to use the code I give ? I think this is the most basic use of reactive form.
You have probably already seen that about reactive form (just angular):
https://angular.io/docs/ts/latest/guide/reactive-forms.html

An other usefull tuto but for more advanced use: custom controls (can be usefull to implement a dropdown in a reactive form in NS):

serge


#6

Hi Serge, I followed your advice and it worked like a charm! Thank you for your support!


#7

Thanks @serge,

I got to get my reactive SearchBox working thanks to your example.

Cheers


#8

Allways nice to help :slight_smile: