Validasi pada Kontrol Kustom
Sediakan validator dari kontrol kustom.
Validasi pada Kontrol Kustom adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Kontrol yang Memvalidasi Diri Sendiri
Kontrol khusus dapat membawa logika validasinya sendiri dengan mengimplementasikan interface Validator dan mendaftarkannya ke NG_VALIDATORS, sehingga pengguna kontrol langsung mendapatkan validitas.
Interface Validator
Validator memerlukan metode validate yang mengembalikan ValidationErrors (peta kesalahan) atau null jika nilainya valid.
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}Mendaftarkan NG_VALIDATORS
Tambahkan penyedia multi kedua untuk NG_VALIDATORS di samping NG_VALUE_ACCESSOR, sekali lagi dengan menggunakan forwardRef.
import { NG_VALIDATORS } from '@angular/forms';
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]Mengembalikan Peta Kesalahan
Kunci dalam peta kesalahan menjadi entri di control.errors. Gunakan kunci yang deskriptif dan muatan opsional agar template dapat menampilkan pesan yang sesuai.
validate(control: AbstractControl): ValidationErrors | null {
const v = control.value;
if (v == null) return { required: true };
if (v < this.min) return { min: { required: this.min, actual: v } };
return null;
}Menggunakan Kesalahan
Template membaca control.errors seperti pada validator bawaan, lalu menampilkan pesan ketika kontrol tidak valid dan sudah disentuh.
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>Menggabungkan dengan Validator Eksternal
Validator dari kontrol dan validator yang diberikan pengguna (dalam formulir reaktif) sama-sama dijalankan dan digabungkan. Aturan kontrol Anda menambahkan aturan formulir, bukan menggantikannya.
stars: [0, [Validators.required]] // plus the control's own validate()Validasi Dinamis
Jika validasi bergantung pada input yang berubah, panggil callback perubahan yang telah didaftarkan untuk memberi tahu Angular agar menjalankan ulang validasi.
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }Validasi Asinkron
Untuk pemeriksaan di server, implementasikan AsyncValidator dengan validate yang mengembalikan Observable atau Promise berisi kesalahan, lalu daftarkan dengan NG_ASYNC_VALIDATORS.
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}Tetap Fokus
Masukkan hanya validasi yang melekat pada kontrol ke dalam kontrol tersebut (misalnya peringkat harus lebih besar dari nol). Serahkan aturan khusus bisnis kepada formulir yang menggunakan kontrol agar dapat digunakan kembali.
Menguji Validasi
Lakukan pengujian unit pada validate secara langsung dengan meneruskan kontrol tiruan yang memiliki nilai, lalu pastikan peta kesalahan atau null yang dikembalikan sudah benar.
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});Kontrol Khusus Lengkap
Setelah akses nilai, status nonaktif, status sudah disentuh, dan validasi diimplementasikan, komponen Anda menjadi kontrol formulir yang lengkap dan dapat digunakan kembali, serta tidak dapat dibedakan dari input bawaan oleh pengguna kontrol.
Pemeriksaan Singkat
Periksa pemahaman Anda tentang validasi.
Ringkasan
Anda menambahkan validasi dengan mengimplementasikan Validator.validate, mendaftarkan NG_VALIDATORS, mengembalikan peta kesalahan, mendukung validasi ulang dinamis melalui registerOnValidatorChange, serta secara opsional menggunakan AsyncValidator dengan NG_ASYNC_VALIDATORS untuk membuat kontrol khusus yang terintegrasi sepenuhnya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Validasi pada Kontrol Kustom” gratis?
Ya — teks lengkap “Validasi pada Kontrol Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Validasi pada Kontrol Kustom”?
Sediakan validator dari kontrol kustom. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Validasi pada Kontrol Kustom” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Antarmuka ControlValueAccessor
- Menulis dan Mendaftarkan Nilai
- Menangani State Dinonaktifkan dan Tersentuh
- Validasi pada Kontrol Kustom