Angular — Validation

Built-in Validators

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

form = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  age: new FormControl('', [Validators.min(18), Validators.max(120)]),
  password: new FormControl('', [Validators.minLength(8)])
});

Template-Driven Validation

<form #form="ngForm">
  <input name="email" ngModel required email #email="ngModel">
  
  <div *ngIf="email.invalid && email.touched">
    <div *ngIf="email.errors?.['required']">Email is required</div>
    <div *ngIf="email.errors?.['email']">Invalid email</div>
  </div>
</form>

Reactive Forms Validation

<form [formGroup]="form">
  <input formControlName="email">
  
  <div *ngIf="form.get('email')?.invalid && form.get('email')?.touched">
    <div *ngIf="form.get('email')?.errors?.['required']">Required</div>
    <div *ngIf="form.get('email')?.errors?.['email']">Invalid email</div>
  </div>
</form>

Custom Validators

function forbiddenNameValidator(control: FormControl): { [key: string]: any } | null {
  const forbidden = /admin/.test(control.value);
  return forbidden ? { forbiddenName: true } : null;
}

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

Form States

State	Description
valid	All rules pass
invalid	Has errors
pristine	Not touched
touched	User interacted
dirty	Value changed

Mini Practice

1. Add built-in validators
2. Display error messages
3. Create custom validators
4. Style invalid fields

Up Next

Continue with Methods — component methods.