Devre Dışı ve Dokunulmuş Durumları Ele Alma
Form durumunu denetiminize yansıtın
Devre Dışı ve Dokunulmuş Durumları Ele Alma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.
Değerin Ötesi
Tam bir özel denetim, iki form kavramına daha uyar: disabled durumu ve touched durumu. Bunlar kullanıcı deneyimini ve doğrulama gösterimini yönlendirir.
setDisabledState
Form denetimi devre dışı bırakıldığında veya yeniden etkinleştirildiğinde (örneğin control.disable() aracılığıyla) Angular setDisabledState çağırır. Bu durumu component'inize yansıtın.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Devre Dışı Durumu Görünüme Yansıtma
Denetimi biçimlendirmek ve etkileşimi engellemek için disabled bayrağını kullanın; böylece kullanıcılar devre dışı bir alanı değiştiremez.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'İşleyicileri Korumaya Alma
Ayrıca değişiklik işleyicilerinizi de koruyun; devre dışı durumdayken programatik veya klavye etkileşimi hiçbir işlem yapmasın.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular, denetimi dokunulmuş olarak işaretlemek için bir geri çağırma iletir. Bunu onChange işlevini kaydettiğiniz gibi kaydedin.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}onTouched Çağrısı
Kullanıcı denetimden ayrıldığında, genellikle blur sırasında, dokunulmuş geri çağırmasını çalıştırın. Bu, Angular'a kullanıcının etkileşim kurduğunu bildirir ve touched tabanlı doğrulama iletilerini etkinleştirir.
onBlur(): void {
this.onTouched();
}Touched Neden Önemlidir
Doğrulama kullanıcı deneyimi çoğu zaman hataları yalnızca bir alana dokunulduktan sonra gösterir. onTouched çağrılmazsa control.touched false kalır ve hata iletileri doğru zamanda hiç görünmeyebilir.
<small *ngIf="control.touched && control.invalid">Required</small>Blur Bağlantısı Kurma
Denetimden ayrılmanın onu dokunulmuş olarak işaretlemesi için blur işleyicisini şablona bağlayın.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Reactive Devre Dışı Bırakma Deseni
Şablondaki disabled binding'i yerine form API'si aracılığıyla (control.disable()) devre dışı bırakmayı tercih edin; böylece Angular setDisabledState işlevini tutarlı biçimde yönlendirir.
this.form.get('stars')?.disable();Erişilebilirlik
Devre dışı ve odak durumlarını erişilebilir biçimde yansıtın: aria-disabled ayarlayın, tabindex değerini yönetin ve klavye kullananların touched durumunu tetiklemek için blur yapabilmesini sağlayarak denetimi herkes için kullanılabilir tutun.
Artık Tamamen Tümleştirildi
Değer, devre dışı ve dokunulmuş durumların tümü ele alındığında denetiminiz reactive ve template-driven formlarda yerel bir input gibi davranır. Son parça doğrulamadır.
Hızlı Kontrol
Devre dışı ve dokunulmuş durumları konusundaki bilginizi kontrol edin.
Özet
setDisabledState işlevini ele aldınız (devre dışı durumu yansıtıp buna karşı koruma) ve registerOnTouched kullandınız (touched durumunu işaretlemek, doğrulama kullanıcı deneyimini etkinleştirmek için blur sırasında çağırma). Devre dışı durumunu yönlendirmek için form API'sini tercih edin ve denetimi erişilebilir tutun.
Sıkça Sorulan Sorular
“Devre Dışı ve Dokunulmuş Durumları Ele Alma” dersi ücretsiz mi?
Evet — “Devre Dışı ve Dokunulmuş Durumları Ele Alma” 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.
“Devre Dışı ve Dokunulmuş Durumları Ele Alma” dersinde ne öğreneceğim?
Form durumunu denetiminize yansıtı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 3. dersidir.
“Devre Dışı ve Dokunulmuş Durumları Ele Alma” 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