Persyaratan: Dalam pengembangan front-end harian, formulir sering digunakan untuk menambahkan dan mengedit data melalui formulir. Instans FormGroup dapat melacak sekumpulan instans FormControl, dan ketika FormGroup dibuat, setiap kontrol di dalamnya dapat dilacak dengan namanya. Bagaimana cara menyesuaikan kontrol formulir?
Mari kita lihat renderingnya terlebih dahulu:
Langkah-langkahnya adalah sebagai berikut:
- Mewarisi antarmuka ControlValueAccessor
- Daftar ke penyedia NG_VALUE_ACCESSOR
Mewarisi antarmuka ControlValueAccessor
Antarmuka ControlValueAccessor mendefinisikan 4 metode, sebagai berikut:
- writeValue: Setiap tindakan nilai yang secara eksplisit memanggil API FormControl akan memanggil metode writeValue() dari kontrol formulir kustom dan meneruskan nilai baru sebagai parameter. Apa yang dilakukannya adalah mengatur nilai kontrol formulir asli. Aliran data berasal dari formulir Angular -> Formulir asli (kontrol kustom).
- registerOnChange: mendaftarkan peristiwa onChange, yang dipanggil pada inisialisasi dan merupakan fungsi pemicu peristiwa. Apa gunanya fungsi pemicu peristiwa ini? Pertama-tama kita perlu menyimpan fungsi pemicu peristiwa di registerOnChange dan memanggilnya saat waktunya tepat (misalnya, ketika kontrol menerima input pengguna dan perlu merespons). Anda dapat memahami fungsi ini sebagai "API yang digunakan oleh pemanggil untuk memberi tahu kontrol ketika ada perubahan dalam data formulir dalam kontrol", yaitu, untuk menyinkronkan informasi dalam kontrol. Parameter fungsi peristiwa ini adalah nilai yang akan diterima oleh bentuk Angular. Aliran data dari formulir asli (kontrol kustom) -> formulir sudut.
- registerOnTouched: Mendaftarkan peristiwa onTouched, yang merupakan fungsi panggilan balik yang dipicu saat pengguna berinteraksi dengan kontrol. Fungsi ini digunakan untuk memberi tahu kontrol formulir bahwa sudah disentuh untuk memperbarui status internal FormContorl terikat. Aliran data dari formulir asli (kontrol kustom) -> formulir sudut.
- setDisabledState: Saat status formulir berubah menjadi atau dari DISABLED, API formulir memanggil metode setDisabledState() untuk mengaktifkan atau menonaktifkan elemen DOM yang sesuai. Aliran data berasal dari formulir Angular -> Formulir asli (kontrol kustom).
Interaksi ditunjukkan di bawah ini:
Faktanya, kontrol formulir asli juga memiliki antarmuka yang mirip dengan ControlValueAccessor, misalnya, ketika Angular menemukan kontrol asli input atau textarea DOM dalam templat komponen, itu akan menggunakan perintah DefaultValueAccessor.
Aksesori | Elemen Formulir | DefaultValueAccessor | masukan, area teks | CheckboxControlValueAccessor | masukan[jenis=kotak centang] | NumberValueAccessor | masukan[jenis=angka] | RadioControlValueAccessor | masukan[jenis=radio] | RangeValueAccessor | masukan[jenis=rentang] | SelectControlValueAccessor | pilih | PilihMultipleControlValueAccessor | pilih[ganda] |
Di atas adalah kontrol formulir Angular yang dibuat Angular untuk semua elemen formulir DOM asli, yaitu ControlValueAccessor bawaan.
Dokumentasi:Login hyperlink terlihat.
Daftar ke penyedia NG_VALUE_ACCESSOR
Setelah mengimplementasikan antarmuka ControlValueAccessor, kita juga perlu mendaftarkannya sebagai NG_VALUE_ACCESSOR, sehingga kontrol formulir kustom dapat dikenali dan diintegrasikan oleh Angular, jika tidak, akan mendapatkan kesalahan "RuntimeError: NG01203: Tidak ada pengakses nilai untuk nama kontrol formulir: 'xxx'".
Dokumentasi:Login hyperlink terlihat.
Mengkodekan
Menurut langkah-langkahnya, pekerjaan pengkodean lengkap, efeknya adalah rendering awal, kodenya adalah sebagai berikut.
Halaman HTML:
Kode TS:
Referensi:
Login hyperlink terlihat.
Login hyperlink terlihat. |
Dipaparkan pada 2025-4-30 16:00:55
|
|
|
|
