Reactive Forms Not Working


#1

I have been trying to implement the angular reactive forms. Below is the snippet of my code

app.component.html

<StackLayout [formGroup]="signUpForm">
	<TextField formControlName="email" hint="Email" keyboardType="email"></TextField>
        <TextField formControlName="username" hint="Username"></TextField>
        <Button text="sign up"  (tap)="onButtonTap()"></Button>
</StackLayout>

app.component.ts

export class AppComponent{
    email:AbstractControl;
    username:AbstractControl;
constructor(private formBuilder:FormBuilder){  
     this.signUpForm = this.formBuilder.group({
            email: ["",Validators.required],
            username:["",Validators.required],
      });
}

ngOnInit(){
   this.email = this.signUpForm.controls['email'];
   this.username = this.signUpForm.controls['username'];
}
onButtonTap(){
      console.log(JSON.stringify(this.signUpForm.value));
}

}

I have imported both nativescriptformsmodule and angular forms module in my module.ts file. when I tap the sign up button after entering the values in the textfields,console is printing the value as empty string. I am not able to get the values entered in the form. Am I misssing something?


#2
  1. signUpForm is not defined in your provided snippet. The App would blow up when it tried to do:
this.signUpForm = this.formBuilder.group({....
  1. You need to have both the FormsModule and ReactiveFormsModule imported on the AppModule (in this case since you are working with the AppComponent.
  2. The email and username variables aren’t really needed, as you aren’t doing anything with them in your view or class.

#3

Here is my modified app.component.ts

import { Validators,AbstractControl, FormBuilder, FormGroup} from '@angular/forms';
@Component({
    selector: "app-component",
    moduleId: module.id,
    templateUrl: "./app.component.html",
    styleUrls: ['./home.component.css']
})

export class AppComponent{
     signUpForm: FormGroup;    
     email:AbstractControl;
    username:AbstractControl;
constructor(private formBuilder:FormBuilder){  
     this.signUpForm = this.formBuilder.group({
            email: ["",Validators.required],
            username:["",Validators.required],
      });
}

ngOnInit(){
   
}
onButtonTap(){
      console.log(JSON.stringify(this.signUpForm.value));
}

}

I have imported ReactiveFormsModule from @angular/forms and NativeScriptFormsModule from nativescript-angular/forms .

Is it necessary to import the FormsModule from @angular/forms also?


#4

Hey @Indragith,

I don’t see anything obviously wrong here personally. Could you try to get this example working in a NativeScript Playground instance? https://play.nativescript.org/

If you could it would help us debug this problem.


#5

It is not necessary to import the FormsModule from @angular/forms, as NativeScriptFormsModule does export that module.

Here’s a working example (link is valid for 30 days): https://ufile.io/fwupz

Basically you need to include the following in your imports array of the AppModule:

NativeScriptFormsModule,
ReactiveFormsModule

This is the component template (as you had):

<StackLayout [formGroup]="signUpForm">
    <TextField formControlName="email" hint="Email" keyboardType="email"></TextField>
    <TextField formControlName="username" hint="Username"></TextField>
    <Button text="sign up" (tap)="onButtonTap()"></Button>
</StackLayout>

and the component class:

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

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent {

    signUpForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.signUpForm = this.formBuilder.group({
            email: ["", Validators.required],
            username: ["", Validators.required],
        });
    }

    onButtonTap() {
        console.log(JSON.stringify(this.signUpForm.value));
    }

}

Results in:

CONSOLE LOG file:///app/app.component.js:14:20: {"email":"Test","username":"Test"}

#6

Thanks @sean-perkins @tjvantoll. I forgot to mention that I am using lazy loading to load this component. Error has been fixed by importing both ReactiveFormsModule and NativeScriptFormsModule in the lazy loaded module.