Gereksinimler: Günlük ön yüz geliştirmede, formlar genellikle formlar aracılığıyla veri eklemek ve düzenlemek için kullanılır. Bir FormGroup örneği, bir dizi FormControl örneğini takip edebilir ve bir FormGroup oluşturulduğunda, içindeki her kontrol kendi adıyla takip edilebilir. Form kontrolünü nasıl özelleştirebilirim?
Önce renderlere bakalım:
Adımlar şunlardır:
- ControlValueAccessor arayüzünü devralır
- Bir NG_VALUE_ACCESSOR sağlayıcıya kayıt olun
ControlValueAccessor arayüzünü devralır
ControlValueAccessor arayüzü aşağıdaki gibi 4 yöntem tanımlar:
- writeValue: FormControl API'sini açıkça çağıran herhangi bir değer eylemi, özel form kontrolünün writeValue() metodunu çağırır ve yeni değeri parametre olarak iletecektir. Yaptığı şey, yerel form kontrolünün değerini ayarlamaktır. Veri akışı Angular form -> Native form (özel kontrol) üzerinden alınmıştır.
- registerOnChange: onChange olayını kaydeder, bu olay başlatma sırasında çağrılır ve bir olay tetikleme fonksiyonudur. Bu olay tetikleyici fonksiyonunun ne faydası var? Önce registerOnChange'te olay tetikleyici fonksiyonunu kaydedip zamanı geldiğinde (örneğin, kontrol kullanıcı girdisini alıp yanıt verdiğinde) çağırmamız gerekiyor. Bu fonksiyonu, "arayan tarafından kontrol verisindeki form verisinde değişiklik olduğunda kontrolü bilgilendirmek için kullanılan bir API" olarak anlayabilirsiniz, yani kontroldeki bilgiyi senkronize etmek için. Bu olay fonksiyonunun parametresi, Açısal formun alacağı değerdir. Yerel form (özel kontrol) -> Açısal formdan veri akışı.
- registerOnTouched: Bir kullanıcının bir kontrol ile etkileşime girdiğinde tetiklenen geri çağırma fonksiyonu olan onTouched olayını kaydeder. Bu fonksiyon, form kontrolüne zaten dokunulduğunu bildirmek için kullanılır; sınırlı FormContorl'un iç durumu güncellenir. Yerel form (özel kontrol) -> Açısal formdan veri akışı.
- setDisabledState: Form durumu DISABLED olarak veya DISABLED'den değiştiğinde, form API'si ilgili DOM öğesini etkinleştirmek veya devre dışı bırakmak için setDisabledState() metodunu çağırır. Veri akışı Angular form -> Native form (özel kontrol) üzerinden alınmıştır.
Etkileşim aşağıda gösterilmiştir:
Aslında, yerel form kontrolleri ControlValueAccessor'a benzer arayüzlere de sahiptir; örneğin, Angular bileşen şablonlarında giriş veya metin alanı DOM yerel kontrolleriyle karşılaştığında DefaultValueAccessor komutunu kullanır.
Erişimci | Form Öğesi | DefaultValueAccessor | giriş,metin alanı | CheckboxControlValueAccessor | giriş[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | giriş[type=radyo] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | seçmek | SelectMultipleControlValueAccessor | select[birden fazla] |
Yukarıdaki, Angular'ın tüm yerel DOM form öğeleri için oluşturduğu Angular form kontrolüdür, yani dahili ControlValueAccessor.
Belge:Bağlantı girişi görünür.
Bir NG_VALUE_ACCESSOR sağlayıcıya kayıt olun
ControlValueAccessor arayüzünü uyguladıktan sonra, özel form kontrolünün Angular tarafından tanınıp entegre edilmesi için onu NG_VALUE_ACCESSOR olarak da kaydetmemiz gerekiyor, aksi takdirde "RuntimeError: NG01203: Form kontrol adı için değer erişimcüsü yok: 'xxx'" hatası alacaktır.
Belge:Bağlantı girişi görünür.
kodlamak
Adımlara göre, tam kodlama çalışması, etki ilk render olur, kod ise şöyledir.
HTML sayfası:
TS Kodu:
Referans:
Bağlantı girişi görünür.
Bağlantı girişi görünür. |
2025-4-30 16:00:55 tarihinde yayınlandı
|
|
|
|
