Reactive Form Validation In Angular
New Post has been published on https://is.gd/TbyeIX
Reactive Form Validation In Angular
Reactive Form Validation By Sagar Jaybhay
When we create reactive forms we don’t use html5 validation attributes rather than we use form validator which we assign when we create form group controls.
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.css'] ) export class SignupFormComponent form=new FormGroup( username:new FormControl('initialValue',Validators.required), password:new FormControl('initialvalue',Validators.required) )
In this we use Validator class in which static methods are defined like required,email,min, max length etc. first parameter to FormControl is initial value or default value which we want to set.
For this validator class we need to import this validator from angular/forms.
All About Reactive Forms – Link
import FormGroup,FormControl, Validators from '@angular/forms';
How to add multiple validators in ReactiveForms angular?
FormControl class in which second parameter takes validator or validatorfn as input parameter.
form=new FormGroup( username:new FormControl('',[Validators.required, Validators.minLength(3)]), password:new FormControl('',Validators.required) )
How to Implement Custom Validation in ReactiveForms Angular?
interface ValidatorFn null
Any validator function which matches signature of above interface is considered as validator function.
Then write below code in validator files.
import AbstractControl, ValidationErrors from '@angular/forms'; export class UsernameValidators null if((control.value as string).indexOf(' ')>=0) return cannotcontainwhitespcae:true; return null;
This code checks if any white space contains in user name or not. After this you need to add this validator in our validator group.
form=new FormGroup( username:new FormControl('',[Validators.required, Validators.minLength(3), UsernameValidators.checkWhiteSpace ]), password:new FormControl('',Validators.required) )
Actually we are creating static method so we can directly call this method using class name.
How to set form level errors in reactive form angular?
To check validation on button click in reactive forms we have ngSubmit event and on that event we call login method.
<form [formGroup]="form" (ngSubmit)="login()">
Now in login method we check the validation and as per response we set the errors or not set the errors. To set the form level errors we use setErrors method of form object.
this.form.setErrors( invalidLogin:true ); }
Now to check the errors on UI side we need to add div which error for that we add div and in that we check errors are present or not. And on that basis we show the errors.
<div *ngIf="form.errors" class="alert alert-danger">