Menulis dan Mendaftarkan Nilai
Implementasikan writeValue dan callback perubahan.
Menulis dan Mendaftarkan Nilai adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Dua Metode Inti
Inti dari akses nilai adalah memindahkan data ke dua arah: writeValue membawa nilai model ke tampilan Anda, sedangkan callback dari registerOnChange mengirimkan perubahan pengguna kembali ke model.
writeValue
Angular memanggil writeValue saat formulir menetapkan atau mengatur ulang nilai kontrol. Simpan nilai tersebut dalam status komponen agar tampilan mencerminkannya.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Menangani Null
writeValue dapat menerima null saat pengaturan ulang. Normalisasi nilai tersebut menjadi nilai bawaan yang aman agar templat Anda tidak bermasalah.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular memberikan callback yang harus Anda panggil setiap kali nilai berubah. Simpan callback tersebut; Anda akan memanggilnya saat terjadi interaksi pengguna.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Mengirimkan Perubahan
Saat pengguna berinteraksi, perbarui status internal dan panggil callback onChange yang tersimpan dengan nilai baru untuk memperbarui model formulir.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Menghubungkan Templat
Templat merender status saat ini dan memicu penangan Anda saat pengguna melakukan tindakan, yang kemudian memanggil onChange.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Menjaga Sinkronisasi Tampilan
Karena writeValue memperbarui status internal dan templat terikat padanya, perubahan formulir secara terprogram (seperti patchValue) langsung tercermin dalam komponen Anda.
Kompatibel dengan OnPush
Dengan deteksi perubahan OnPush, perbarui status melalui bidang komponen dan biarkan binding bereaksi. Jika Anda mengubahnya dari sumber asinkron, tandai untuk pemeriksaan atau gunakan signal agar tampilan tetap mutakhir.
Jangan Memanggil onChange dalam writeValue
Penting: jangan pernah memanggil onChange dari dalam writeValue. Hal itu akan menggemakan pembaruan terprogram kembali ke model dan dapat menyebabkan pengulangan. onChange hanya untuk perubahan yang dilakukan pengguna.
Mengetik Nilai
Berikan tipe nilai konkret pada kontrol Anda (number, string, atau interface khusus), lalu ketik metodenya dengan tepat agar integrasinya dengan formulir reaktif lebih aman.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Hasil Sejauh Ini
Dengan mengimplementasikan writeValue dan registerOnChange, kontrol dapat membaca dari dan menulis ke model formulir. Selanjutnya, tambahkan penanganan status nonaktif dan sudah disentuh untuk UX yang lengkap.
Pemeriksaan Singkat
Periksa pemahaman Anda tentang penulisan nilai.
Ringkasan
Anda mengimplementasikan writeValue (dari model ke tampilan, dengan menangani null) dan menggunakan callback registerOnChange untuk mengirim perubahan pengguna (dari tampilan ke model), menghubungkan template, serta mempelajari bahwa Anda tidak boleh memanggil onChange dari writeValue.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menulis dan Mendaftarkan Nilai” gratis?
Ya — teks lengkap “Menulis dan Mendaftarkan Nilai” 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 “Menulis dan Mendaftarkan Nilai”?
Implementasikan writeValue dan callback perubahan. 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 2 dari 4.
Berapa lama pelajaran “Menulis dan Mendaftarkan Nilai” 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