Validasi Kustom di Angular 14

Angular 14 menyediakan kerangka kerja yang kuat untuk membangun aplikasi web, namun terkadang validator bawaan tidak cukup. Di situlah validasi khusus berperan. Dalam postingan ini, kita akan mempelajari cara membuat validator khusus di Angular 14 dan memberikan contoh kerjanya.

Apa itu Validasi Kustom di Angular 14?

Validasi khusus di Angular 14 memungkinkan pengembang membuat validator mereka sendiri untuk memenuhi persyaratan aplikasi tertentu. Fitur ini berguna ketika validator bawaan tidak memenuhi kriteria validasi. Validator khusus memungkinkan pengembang memeriksa validasi berdasarkan persyaratan tertentu dan memberikan kontrol lebih besar atas proses validasi.

Membuat Validator Khusus

Membuat validator khusus di Angular 14 melibatkan pembuatan kelas yang mengimplementasikan antarmuka Validator. Antarmuka Validator memiliki satu metode, validasi, yang mengambil kontrol sebagai argumen dan mengembalikan objek bertipe ValidationErrors jika kontrol tidak valid, atau null jika kontrol valid.

Berikut adalah contoh validator khusus yang memeriksa apakah string hanya berisi angka:

import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';

export function numbersOnly(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const regex = /^\d+$/;
    const valid = regex.test(control.value);
    return valid ? null : { numbersOnly: true };
  };
}

Pada contoh di atas, kita membuat fungsi bernama numbersOnly() yang mengembalikan ValidatorFn. Fungsi ini mengambil objek AbstractControl sebagai argumen dan mengembalikan objek bertipe ValidationErrors jika kontrolnya tidak valid, atau null jika kontrolnya valid. Fungsi ini memeriksa apakah string input hanya berisi angka menggunakan ekspresi reguler. Jika string input hanya berisi angka, ia mengembalikan null; jika tidak, ia akan mengembalikan objek dengan kunci numbersOnly yang disetel ke true.

Menggunakan Validator Khusus

Setelah kami membuat validator khusus, kami dapat menggunakannya di formulir kami. Berikut ini contoh formulir yang menggunakan validator khusus yang kita buat sebelumnya:

<form [formGroup]="myForm">
  <label>
    Enter a number:
    <input type="text" formControlName="myInput">
  </label>
  <div *ngIf="myForm.get('myInput').invalid && (myForm.get('myInput').dirty || myForm.get('myInput').touched)">
    <div *ngIf="myForm.get('myInput').errors.numbersOnly">
      Please enter numbers only.
    </div>
  </div>
</form>

Pada contoh di atas, kita membuat grup formulir bernama myForm yang memiliki satu kontrol formulir bernama myInput. Kami menerapkan validator numbersOnly() ke kontrol myInput dengan menambahkannya ke daftar validator untuk kontrol:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { numbersOnly } from './validators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myInput: ['', [Validators.required, numbersOnly()]]
    });
  }
}

Pada contoh di atas, kita mengimpor validator numbersOnly() dan menambahkannya ke daftar validator untuk kontrol myInput. Kami juga menerapkan validator Validators.required bawaan ke kontrol myInput untuk memastikan bahwa kontrol tersebut tidak kosong.

Kesimpulan

Dalam postingan ini, kita mempelajari cara membuat validator khusus di Angular 14 dan memberikan contoh kerja tentang bagaimana kita dapat menggunakan utilitas ini dalam skenario aplikasi nyata. Tentu saja, kemungkinannya tidak terbatas dan di sinilah keahlian dan kreativitas Anda muncul. Teruslah coding.