Reactive Forms

Build dynamic forms, where input fields are rendered based on some data structure that You get from the server.

Benefits

• More controls over form structure
• More controls over form behavior
• Easier to unit test

To use the angular forms, You need to import FormGroup and FormControl in your component.

import { FormGroup, FormControl } from '@angular/forms';

You don’t need FormsModule! This is for template drive approach.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    SignupFormComponent
  ],
  imports: [
    BrowserModule,
    NgbModule,
    ReactiveFormsModule
  ],

Creating Controls Programmatically

Component

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.scss']
})
export class SignupFormComponent {

  form = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });
}

HTML

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
        formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
        formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Adding Validation

HTML

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
        formControlName="username"
            id="username" 
            type="text" 
            class="form-control form-control-lg">
            <div *ngIf="form.get('username').touched && form.get('username').invalid" class="alert alert-danger">Username is required</div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
        formControlName="password"
            id="password" 
            type="text" 
            class="form-control form-control-lg">
    </div>
    <button class="btn btn-dark btn-lg" type="submit">Sign Up</button>
</form>

TS

import { FormGroup, FormControl, Validators } from '@angular/forms';

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });

Multiple validation with ValidatorFn (function) array

To assign multiple validators to a FormControl, simply pass them using anarray.

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10),
    ]),
    password: new FormControl('', Validators.required)
  });

Cleaner Method

TS

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

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.scss']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });

  get username() {
    return this.form.get('username');
  }
}

HTML

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
        formControlName="username"
            id="username" 
            type="text" 
            class="form-control form-control-lg">
            <div *ngIf="username.touched && username.invalid" 
            class="alert alert-danger">Username is required</div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
        formControlName="password"
            id="password" 
            type="text" 
            class="form-control form-control-lg">
    </div>
    <button class="btn btn-dark btn-lg" type="submit">
        Sign Up
    </button>
</form>