Antarmuka ControlValueAccessor
Hubungkan widget kustom ke formulir Angular.
Antarmuka ControlValueAccessor adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Mengapa Kontrol Kustom
Formulir Angular langsung berfungsi dengan input native. Agar komponen buatan Anda sendiri (widget rating, pemilih warna, tombol alih) dapat digunakan dengan ngModel dan formControlName, komponen tersebut harus mengimplementasikan ControlValueAccessor.
Jembatan
ControlValueAccessor (CVA) adalah jembatan antara model formulir Angular dan tampilan komponen Anda. Ini menentukan cara model menulis nilai ke dalam tampilan dan cara perubahan pengguna mengalir kembali.
Antarmuka
CVA memerlukan empat metode: writeValue, registerOnChange, registerOnTouched, dan setDisabledState yang bersifat opsional.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Mendaftarkan Penyedia
Beri tahu Angular bahwa komponen Anda adalah akses nilai dengan menyediakan NG_VALUE_ACCESSOR bersama multi: true dan useExisting yang menunjuk ke komponen tersebut.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Mengapa forwardRef
forwardRef diperlukan karena kelas merujuk dirinya sendiri dalam metadata sebelum kelas tersebut didefinisikan. Ini menunda penyelesaian hingga kelas tersedia.
Kerangka Komponen
Kontrol kustom mendeklarasikan penyedia dan mengimplementasikan metode antarmuka. Kelas tersebut menyimpan nilai saat ini secara internal.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Menggunakannya Seperti Native
Setelah CVA diimplementasikan, komponen Anda terhubung ke formulir berbasis templat dan reaktif persis seperti input native.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Dua Arah Data
Aliran model-ke-tampilan berlangsung melalui writeValue (Angular memasukkan nilai formulir). Aliran tampilan-ke-model berlangsung melalui callback yang didaftarkan dalam registerOnChange (Anda mengirimkan perubahan pengguna).
Melacak Status Tersentuh
UX validasi formulir bergantung pada status touched. Anda memberi tahu Angular melalui callback dari registerOnTouched, biasanya saat kehilangan fokus.
Status Nonaktif
Saat formulir menonaktifkan kontrol (control.disable()), Angular memanggil setDisabledState agar komponen Anda dapat mencerminkannya secara visual dan mengabaikan input.
Peta Jalan
Pelajaran berikutnya mengimplementasikan setiap bagian: menulis dan mendaftarkan nilai, menangani status nonaktif dan tersentuh, serta menambahkan validasi. Semua bagian ini membentuk kontrol kustom yang terintegrasi sepenuhnya.
Pemeriksaan Singkat
Periksa dasar-dasar CVA Anda.
Rangkuman
Anda mempelajari bahwa ControlValueAccessor menghubungkan komponen kustom ke formulir Angular melalui empat metode, yang didaftarkan melalui NG_VALUE_ACCESSOR dengan forwardRef dan multi: true. Selanjutnya, Anda akan mengimplementasikan penulisan dan pendaftaran nilai.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Antarmuka ControlValueAccessor” gratis?
Ya — teks lengkap “Antarmuka ControlValueAccessor” 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 “Antarmuka ControlValueAccessor”?
Hubungkan widget kustom ke formulir Angular. 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 1 dari 4.
Berapa lama pelajaran “Antarmuka ControlValueAccessor” 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