Angular Academy · Ders

Eş Zamanlı Olmayan Doğrulayıcılar

Sunucuya karşı eş zamanlı olmayan doğrulama yapın

Eş Zamanlı Olmayan Doğrulayıcılar, 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.

Bekleyen Doğrulama

Kullanıcı adının alınmış olup olmadığını denetlemek gibi bazı doğrulamalar bir sunucu gerektirir. Eşzamansız doğrulayıcılar, bir hata eşlemesine veya null değerine çözümlenen bir Promise ya da Observable döndürür.

AsyncValidatorFn Türü

Eşzamansız bir doğrulayıcı, bir denetim alır ve Observable<ValidationErrors | null> (veya bir Promise) döndürür.

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

null Döndürmek Geçerli Demektir

Değer geçerliyse null, geçersizse { taken: true } gibi bir hata nesnesi döndürün; bu, eşzamanlı doğrulayıcılarla tamamen aynıdır.

Kullanıcı Adı Doğrulayıcısı

Bu doğrulayıcı bir hizmeti çağırır ve sonucu eşler.

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

Kaydetme

Eşzamansız doğrulayıcılar, eşzamanlı doğrulayıcılardan ayrı olarak bir denetimin üçüncü bağımsız değişkenine eklenir.

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

PENDING Durumu

Eşzamansız bir doğrulayıcı çalışırken denetimin durumu PENDING olur. Yükleniyor göstergesi görüntülemek için bu durumu kullanın.

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

İstekleri Geciktirme

Eşzamansız doğrulayıcılar her değer değişikliğinde çalışır. Sunucuyu gereksiz yere yormamak için istekleri geciktirin.

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap Eski Çağrıları İptal Eder

switchMap kullanıldığında değer yeniden değiştiğinde devam eden önceki istek iptal edilir; böylece yalnızca en son sonuç önem taşır.

updateOn Stratejisi

Eşzamansız doğrulamanın yalnızca kullanıcı alandan ayrıldığında çalışması ve istek sayısının azalması için updateOn: 'blur' ayarlayın.

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

Hatayı Okuma

Doğrulama tamamlandığında ve denetim değiştirilmiş/dokunulmuş olduğunda hatayı görüntüleyin.

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

En İyi Uygulamalar

Her zaman istekleri geciktirin, eski istekleri iptal edin, bekleme göstergesi görüntüleyin ve formun PENDING durumunda takılı kalmaması için ağ hatalarını yönetin.

Hızlı Kontrol

Eşzamansız doğrulayıcıları anlayıp anlamadığınızı test edin.

Özet

AsyncValidatorFn'in ValidationErrors | null türünde bir Observable/Promise döndürdüğünü ve denetimin üçüncü bağımsız değişkenine kaydedilerek denetimi PENDING durumuna getirdiğini öğrendiniz. Sunucu çağrılarını yönetmek için istekleri geciktirin ve switchMap kullanın.

Sıkça Sorulan Sorular

“Eş Zamanlı Olmayan Doğrulayıcılar” dersi ücretsiz mi?

Evet — “Eş Zamanlı Olmayan Doğrulayıcılar” 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.

“Eş Zamanlı Olmayan Doğrulayıcılar” dersinde ne öğreneceğim?

Sunucuya karşı eş zamanlı olmayan doğrulama yapı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.

“Eş Zamanlı Olmayan Doğrulayıcılar” 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

← Angular Academy Sayfasına Dön