เรามาดูวิธีการ validate form ใน angular กันครับ

ใน angular จะใช้ Validators module ในการ validate form เราจะใช้ Validators สำหรับ validate ใน form control

ตัวอย่างโค้ดในการ validate form ในตัวอย่างเราจะ validate require และ email ไปดูตัวอย่างโค้ดกัน

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

export class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email])
  });
}

เราสามารถ add custom validation ได้ ตามตัวอย่างด้านล่าง

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

export class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email], this.customValidatorMethod)
  });

  customValidatorMethod(control: FormControl) {
    // validation logic
    return { customError: true };
  }
}

ใน template เราสามารถใช้ hasError เพื่อ get error จากการ validate ได้ ตามตัวอย่างโค้ด

<form [formGroup]="myForm">
  <label>Name:</label>
  <input formControlName="name" type="text">
  <div *ngIf="myForm.get('name').hasError('required') && myForm.get('name').touched">
    Name is required
  </div>

  <label>Email:</label>
  <input formControlName="email" type="email">
  <div *ngIf="myForm.get('email').hasError('required') && myForm.get('email').touched">
    Email is required
  </div>
  <div *ngIf="myForm.get('email').hasError('email') && myForm.get('email').touched">
    Email is not valid
  </div>
  <div *ngIf="myForm.get('email').hasError('customError')">
    custom error message
  </div>
</form>

เรายังสามารถใช้ statusChanges และ valueChanges observables ได้