Menangani State Dinonaktifkan dan Tersentuh
Cerminkan state formulir pada kontrol Anda.
Menangani State Dinonaktifkan dan Tersentuh 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.
Melampaui Nilai
Kontrol khusus yang lengkap memperhatikan dua konsep formulir lainnya: status nonaktif dan status sudah disentuh. Keduanya memengaruhi UX dan tampilan validasi.
setDisabledState
Angular memanggil setDisabledState saat kontrol formulir dinonaktifkan atau diaktifkan (misalnya melalui control.disable()). Terapkan status tersebut pada komponen Anda.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Mencerminkan Status Nonaktif pada Tampilan
Gunakan penanda disabled untuk mengatur gaya kontrol dan memblokir interaksi agar pengguna tidak dapat mengubah bidang yang dinonaktifkan.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Melindungi Penangan
Lindungi juga penangan perubahan agar interaksi terprogram atau melalui keyboard tidak melakukan apa pun saat kontrol dinonaktifkan.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular meneruskan callback untuk menandai kontrol sebagai sudah disentuh. Simpan callback tersebut seperti Anda menyimpan onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}Memanggil onTouched
Panggil callback status sudah disentuh saat pengguna meninggalkan kontrol, biasanya ketika terjadi blur. Ini memberi tahu Angular bahwa pengguna telah berinteraksi, sehingga pesan validasi berbasis status sudah disentuh dapat ditampilkan.
onBlur(): void {
this.onTouched();
}Mengapa Status Sudah Disentuh Penting
UX validasi sering menampilkan kesalahan hanya setelah suatu bidang disentuh. Tanpa memanggil onTouched, control.touched tetap false dan pesan kesalahan mungkin tidak muncul pada waktu yang tepat.
<small *ngIf="control.touched && control.invalid">Required</small>Menghubungkan Blur
Pasang penangan blur di template agar saat meninggalkan kontrol, kontrol tersebut ditandai sebagai sudah disentuh.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Pola Penonaktifan Reaktif
Lebih baik menonaktifkan melalui API formulir (control.disable()) daripada binding disabled di template, agar Angular mengendalikan setDisabledState secara konsisten.
this.form.get('stars')?.disable();Aksesibilitas
Cerminkan status nonaktif dan fokus dengan cara yang mudah diakses: atur aria-disabled, kelola tabindex, dan pastikan pengguna keyboard dapat melakukan blur untuk memicu status sudah disentuh, sehingga kontrol tetap inklusif.
Kini Terintegrasi Sepenuhnya
Dengan menangani nilai, status nonaktif, dan status sudah disentuh, kontrol Anda berperilaku seperti input bawaan pada formulir reaktif maupun formulir berbasis template. Bagian terakhirnya adalah validasi.
Pemeriksaan Singkat
Periksa pemahaman Anda tentang status nonaktif dan sudah disentuh.
Ringkasan
Anda menangani setDisabledState (mencerminkan dan melindungi dari status nonaktif) serta registerOnTouched (memanggilnya saat blur untuk menandai kontrol sebagai sudah disentuh dan mengaktifkan UX validasi). Utamakan API formulir untuk mengendalikan status nonaktif dan jaga agar kontrol tetap mudah diakses.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menangani State Dinonaktifkan dan Tersentuh” gratis?
Ya — teks lengkap “Menangani State Dinonaktifkan dan Tersentuh” 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 “Menangani State Dinonaktifkan dan Tersentuh”?
Cerminkan state formulir pada kontrol Anda. 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 “Menangani State Dinonaktifkan dan Tersentuh” 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