ControlValueAccessor Arayüzü
Özel bir bileşeni Angular formlarına bağlayın
ControlValueAccessor Arayüzü, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Özel Kontroller Neden Gerekir
Angular formları, yerel input'larla kutudan çıktığı hâliyle çalışır. Kendi bileşeninizi (puanlama aracı, renk seçici veya açma-kapama düğmesi) ngModel ve formControlName ile kullanılabilir hâle getirmek için ControlValueAccessor uygulaması gerekir.
Köprü
ControlValueAccessor (CVA), Angular'ın form modeli ile bileşeninizin görünümü arasındaki köprüdür. Modelin değerleri nasıl yazacağını ve kullanıcı değişikliklerinin nasıl geri aktarılacağını tanımlar.
Arayüz
CVA dört yöntem gerektirir: writeValue, registerOnChange, registerOnTouched ve isteğe bağlı setDisabledState.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Sağlayıcıyı Kaydetme
NG_VALUE_ACCESSOR sağlayıcısını multi: true ile birlikte tanımlayın ve bileşene işaret eden useExisting değerini vererek Angular'a bileşeninizin bir değer erişicisi olduğunu bildirin.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]forwardRef Neden Gerekir
forwardRef, sınıf tanımlanmadan önce sınıfın kendi üst verilerinde kendisine başvurması nedeniyle gerekir. Çözümlemeyi sınıf mevcut olana kadar erteler.
Bileşen İskeleti
Özel bir kontrol, sağlayıcıyı bildirir ve arayüz yöntemlerini uygular. Sınıf, geçerli değeri kendi içinde tutar.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Yerel Kontrol Gibi Kullanma
CVA uygulandıktan sonra bileşeniniz, şablon odaklı ve reaktif formlara tıpkı yerel bir input gibi bağlanır.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Verilerin İki Yöndeki Akışı
Modelden görünüme akış writeValue üzerinden gerçekleşir (Angular form değerini içeri aktarır). Görünümden modele akış ise registerOnChange ile kaydedilen geri çağırma işlevi üzerinden gerçekleşir (kullanıcı değişikliklerini dışarı aktarırsınız).
Etkileşim Durumunu İzleme
Form doğrulama deneyimi touched durumuna bağlıdır. Genellikle odak kaybı sırasında registerOnTouched üzerinden alınan geri çağırma işleviyle Angular'ı bilgilendirirsiniz.
Devre Dışı Durum
Form kontrolü devre dışı bıraktığında (control.disable()), Angular setDisabledState işlevini çağırır; böylece bileşeniniz bu durumu görsel olarak yansıtabilir ve girdileri yok sayabilir.
Yol Haritası
Sonraki derslerde her parça uygulanacaktır: değerleri yazma ve kaydetme, devre dışı ve etkileşim durumlarını yönetme ve doğrulama ekleme. Bunların tümü, tamamen entegre bir özel kontrol oluşturur.
Hızlı Kontrol
CVA temelleri konusundaki bilginizi kontrol edin.
Özet
ControlValueAccessor'ın özel bileşenleri dört yöntem aracılığıyla Angular formlarına bağladığını öğrendiniz. Bu yöntemler NG_VALUE_ACCESSOR üzerinden forwardRef ve multi: true ile kaydedilir. Sırada değerleri yazmak ve kaydetmek var.
Sıkça Sorulan Sorular
“ControlValueAccessor Arayüzü” dersi ücretsiz mi?
Evet — “ControlValueAccessor Arayüzü” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“ControlValueAccessor Arayüzü” dersinde ne öğreneceğim?
Özel bir bileşeni Angular formlarına bağlayın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“ControlValueAccessor Arayüzü” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ControlValueAccessor Arayüzü
- Değerleri Yazma ve Kaydetme
- Devre Dışı ve Dokunulmuş Durumları Ele Alma
- Özel Denetimlerde Doğrulama