Angular Reactive Forms

In reactive forms, validations are writtten in the component.
Here I have to import ‘Reactiveformsmodule’ from @angular/Forms package.
We are using Formscontrol and FormsGroup in HTML templates.
Validators rules in reactive forms:
1. Validators.required – field is mandatory
2. Validators.minlength- min no of characters
3. Validators.maxlength-max no of characters
4. Validators.pattern- regular expression
Validation properties:
We can check current textbox is clicked or not,valid or not,modified or not etc
Untouched : true|false
Touched:false|true
Pristine: true|false , user has not modified text or check box
Dirty:false|true,user has modified text

Angular 8 Reactive Forms Example

This simple login form example has validations done by reactive forms.

App.component.HTML

<app-login><app-login>
<router-outlet><router-outlet>                
            

App.module.ts

import { NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import {Routes,RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { loginComponent } from './login.component';
                    
const routes: Routes = [
        {path:'login',component:loginComponent}    
        ];
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], 
declarations: [loginComponent,
                AppComponent
                ],
imports: [  RouterModule.forRoot(routes),
            BrowserModule,        
            AppRoutingModule,
            ReactiveFormsModule
            ],    
bootstrap: [AppComponent]
})
export class AppModule { }
            

Login.component.HTML

Reactive Form Validation

<form [formGroup]="pinfologinform" (ngSubmit)="onSubmit()"> 
<div class="form-group">
    <label>User Name<label>
<input type="text" formControlName="username" name="username" id="username" 
class="form-control" [ngClass]="{ 'is-invalid': pinfologinform.controls.username.errors }" >
<div 
*ngIf="pinfologinform.controls.username.errors && pinfologinform.controls.username.errors.required">
<div>                    
<div>                   
                    
<div class="form-group">
        <label>Password<label>
<input type="password" formControlName="password" class="form-control" 
[ngClass]="{ 'is-invalid': pinfologinform.controls.password.errors }" >
    <div 
*ngIf="pinfologinform.controls.password.errors" class="invalid-feedback">
<div 
*ngIf="pinfologinform.controls.password.errors.required">
Password is required
<div>
<div>
<div class="form-group">
<button type="submit" [disabled]="!pinfologinform.valid" class='btn btn-primary' >Register<button>
<div>
<form>
            

Login.component.ts

import { Component, OnInit,Inject} from '@angular/core';
import {FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators,FormBuilder} from '@angular/forms';
import { CommonModule } from '@angular/common';                
import { Router,Routes, ROUTES, RouterModule,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
});
export class LoginComponent implements OnInit {
pinfologinform:FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) {  }
ngOnInit() {
        this.pinfologinform = this.formBuilder.group({
        username: ['', Validators.required],       
        password: ['', Validators.required]
    });   
    }
onSubmit()
{   
this.submitted = true;    
alert("Loginsuccess");
}  
            

Final Output: