Angular Reactive Form Validation

In this example we build angular reactive form Validation, It's a Simple registration form with standard fields likes First name, Last name, email, and Password. all field are required and email and password have 2 errors messages, one for required and second is "Email must be a valid email Address" and for Password have "Password must be at least 6 characters"

Used Bootstrap 4 css for styling and 'is-invalid' class used for invalid field design

Watch This article in Youtube Video Template-Driven Forms

Working Demo: Angular Reactive Form

Import ReactiveFormsModule

First, import the ReactiveFormsModule from the '@angular/forms' library and include it in the imports array of the @NgModule decorator in the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormreactiveComponent } from './formreactive/formreactive.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    FormreactiveComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule 
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the Reactive Component .ts file

In Component .ts file First Import FormGroup, FormControl, Validators from the '@angular/forms'. FormControl is a directive that allows us to create and manage a FormControl instance directly. Usually, if we have multiple FormControls then we need to register within a parent FormGroup.

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

@Component({
  selector: 'app-formreactive',
  templateUrl: './formreactive.component.html',
  styleUrls: ['./formreactive.component.css']
})
export class FormreactiveComponent implements OnInit {
  form = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ]),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(6)
    ])
    
   });
    constructor() { }
  
    get firstname(){
      return this.form.get('firstName')
    }
    ngOnInit() {
    }
  
    onSubmit(){
      alert(JSON.stringify(this.form.value));
    }

}

Reactive Component Template HTML

In the app component template html have all the html markup for the example registration form in your browser. We need to define FormGroup directive in form tag and form input define formControlName

   
<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="jumbotron">
        <h2>Angular 6 Reactive Form validation</h2>
        <form name="form" [formGroup]="form" (ngSubmit)="form.valid && onSubmit()">
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text"  class="form-control" formControlName="firstName" [ngClass]="{'is-invalid':form.get('firstName').touched && form.get('firstName').invalid}" required />
            <div class="invalid-feedback">
              <div>First Name is required</div>
            </div>
          </div>
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" formControlName="lastName" [ngClass]="{'is-invalid':form.get('lastName').touched && form.get('lastName').invalid}" required />
            <div class="invalid-feedback">
              <div>Last Name is required</div>
            </div>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" formControlName="email" [ngClass]="{'is-invalid':form.get('email').touched && form.get('email').invalid}"   />
            <div *ngIf="form.get('email').touched && form.get('email').invalid"  class="invalid-feedback">
              <div *ngIf="form.get('email').errors.required">Email Name is required</div>
              <div *ngIf="form.get('email').errors.email">Email must be a valid email Address</div>
            </div>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control"  formControlName="password" [ngClass]="{'is-invalid':form.get('password').touched && form.get('password').invalid}" />
            <div *ngIf="form.get('password').touched && form.get('password').invalid"  class="invalid-feedback">
              <div *ngIf="form.get('password').errors.required">Password is required</div>
              <div *ngIf="form.get('password').errors.minlength">Password  must be a letaset 6 charector</div>
            </div>
           
          </div>
          <div class="form-group">
            <button class="btn btn-primary"  [disabled]="!form.valid">Register</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Watch This article in Youtube Video Template-Driven Forms