Validasi Kustom dalam Formulir Angular

Pelajari cara menerapkan validator kustom untuk memastikan validasi formulir yang andal dalam aplikasi Angular Anda.

Apa Itu Validasi Kustom?

Validator kustom memungkinkan Anda menentukan logika validasi sendiri di luar validator bawaan seperti required atau minlength.

Membuat Validator Kustom

Validator kustom adalah fungsi sederhana yang mengembalikan null jika valid atau objek jika tidak valid:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Menerapkan Validator

Terapkan validator kustom ke kontrol formulir Anda:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Menampilkan Kesalahan Validasi

Tampilkan pesan kesalahan secara kondisional di templat berdasarkan status validasi:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Menggunakan Direktif Validator

Validator juga dapat digunakan langsung sebagai direktif untuk formulir berbasis templat:

<input name="username" ngModel forbiddenName>

Validator Asinkron

Validator asinkron memungkinkan Anda melakukan validasi yang melibatkan operasi asinkron, seperti pemeriksaan ke server:

username: new FormControl('', null, [asyncValidator])

Menguji Validator Kustom

Selalu uji validator untuk memastikan perilakunya benar dalam berbagai skenario dan kasus khusus.

Ringkasan

Anda telah mempelajari cara membuat dan menerapkan validator kustom untuk validasi formulir yang andal di Angular. Hasil kerja yang luar biasa!