Validator Asinkron
Lakukan validasi terhadap server secara asinkron.
Validator Asinkron adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Validasi yang Menunggu
Beberapa validasi memerlukan server, misalnya untuk memeriksa apakah nama pengguna sudah digunakan. Validator asinkron mengembalikan Promise atau Observable yang menghasilkan peta kesalahan atau null.
Tipe AsyncValidatorFn
Validator asinkron menerima control dan mengembalikan Observable<ValidationErrors | null> atau Promise.
const v: AsyncValidatorFn = (control) => {
return checkAvailable(control.value);
};Mengembalikan null Berarti Valid
Hasilkan null saat nilainya valid, atau objek kesalahan seperti { taken: true } saat tidak valid, persis seperti validator sinkron.
Validator Nama Pengguna
Validator ini memanggil layanan dan memetakan hasilnya.
usernameValidator(api: UserApi): AsyncValidatorFn {
return (control) =>
api.isTaken(control.value).pipe(
map(taken => taken ? { taken: true } : null)
);
}Mendaftarkannya
Validator asinkron ditempatkan pada argumen ketiga control, terpisah dari validator sinkron.
new FormControl('', {
validators: [Validators.required],
asyncValidators: [usernameValidator(api)]
});Status PENDING
Selama validator asinkron berjalan, status control adalah PENDING. Gunakan status ini untuk menampilkan indikator pemuatan.
@if (form.controls.username.pending) {
<span>Checking...</span>
}Memberi Jeda pada Permintaan
Validator asinkron berjalan pada setiap perubahan nilai. Berikan jeda untuk menghindari terlalu banyak permintaan ke server.
return timer(300).pipe(
switchMap(() => api.isTaken(control.value)),
map(taken => taken ? { taken: true } : null)
);switchMap Membatalkan Pemanggilan Lama
Menggunakan switchMap membatalkan permintaan sebelumnya yang sedang berjalan ketika nilai berubah lagi, sehingga hanya hasil terbaru yang penting.
Strategi updateOn
Atur updateOn: 'blur' agar validasi asinkron hanya berjalan ketika pengguna meninggalkan bidang, sehingga jumlah permintaan berkurang.
new FormControl('', {
asyncValidators: [usernameValidator(api)],
updateOn: 'blur'
});Membaca Kesalahan
Tampilkan kesalahan setelah validasi selesai dan control telah berubah atau disentuh.
@if (form.controls.username.hasError('taken')) {
<span>Username already taken</span>
}Praktik Terbaik
Selalu beri jeda, batalkan permintaan lama, tampilkan indikator penundaan, dan tangani kesalahan jaringan agar formulir tidak terjebak dalam status PENDING.
Pemeriksaan Singkat
Uji pemahaman Anda tentang validator asinkron.
Ringkasan
Anda telah mempelajari bahwa AsyncValidatorFn mengembalikan Observable/Promise yang berisi ValidationErrors | null, didaftarkan pada argumen control ketiga, dan membuat control berada dalam status PENDING. Berikan jeda dan gunakan switchMap untuk mengelola pemanggilan ke server.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Validator Asinkron” gratis?
Ya — teks lengkap “Validator Asinkron” 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 “Validator Asinkron”?
Lakukan validasi terhadap server secara asinkron. 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 3 dari 4.
Berapa lama pelajaran “Validator Asinkron” 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
- Formulir Reaktif Bertipe
- FormArray dan Kolom Dinamis
- Validator Asinkron
- Pola FormBuilder