0Pricing
Angular Academy · Ders

Özel Denetimlerde Doğrulama

Özel denetimlerden doğrulayıcılar sağlayın

Özel Denetimlerde Doğrulama, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. 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.

Kendi Kendini Doğrulayan Denetimler

Özel bir denetim, Validator interface'ini uygulayıp NG_VALIDATORS ile kaydolarak kendi doğrulama mantığını taşıyabilir; böylece tüketiciler geçerlilik bilgisini ek çaba harcamadan elde eder.

Validator Interface'i

Validator, geçerli olduğunda ValidationErrors (hata eşlemesi) veya null döndüren bir validate method'u gerektirir.

import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

NG_VALIDATORS Kaydı

NG_VALUE_ACCESSOR yanında ikinci bir çoklu sağlayıcıyı NG_VALIDATORS için ekleyin; yine forwardRef kullanın.

import { NG_VALIDATORS } from '@angular/forms';

providers: [
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]

Hata Eşlemeleri Döndürme

Hata eşlemesindeki anahtarlar control.errors içinde girdilere dönüşür. Şablonların hedefe yönelik iletiler gösterebilmesi için açıklayıcı anahtarlar ve isteğe bağlı yükler kullanın.

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

Hataları Kullanma

Şablonlar, yerleşik doğrulayıcılarda olduğu gibi control.errors değerini okur ve denetim geçersiz ve touched olduğunda iletileri gösterir.

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

Harici Doğrulayıcılarla Birleştirme

Denetimdeki doğrulayıcılar ile tüketicinin reactive form içinde ilettiği doğrulayıcılar birlikte çalışır ve sonuçları birleştirilir. Denetiminizin kuralları formun kurallarının yerine geçmez; onlara eklenir.

stars: [0, [Validators.required]] // plus the control's own validate()

Dinamik Doğrulama

Doğrulama değişen bir input'a bağlıysa Angular'a doğrulamayı yeniden çalıştırmasını bildirmek için kaydedilmiş değişiklik geri çağırmasını çağırın.

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

Asenkron Doğrulama

Sunucu denetimleri için AsyncValidator uygulayın; hataları içeren bir Observable veya Promise döndüren validate kullanın ve NG_ASYNC_VALIDATORS ile kaydedin.

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

Odağı Koruyun

Denetimin doğasında bulunan doğrulamaları yalnızca denetimin içinde tutun (bir rating sıfırdan büyük olmalıdır). Yeniden kullanılabilirlik için iş kurallarına özgü kuralları tüketen forma bırakın.

Doğrulamayı Test Etme

validate işlevini, değer içeren sahte bir denetim ile doğrudan unit test'e tabi tutun ve döndürülen hata eşlemesini veya null değerini doğrulayın.

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

Tam Özel Denetim

Değer erişicisi, devre dışı, dokunulmuş ve doğrulama özelliklerinin tümü uygulandığında component'iniz, tüketiciler açısından yerel input'lardan ayırt edilemeyen, eksiksiz ve yeniden kullanılabilir bir form denetimi olur.

Hızlı Kontrol

Doğrulama bilginizi kontrol edin.

Özet

Validator.validate uygulayarak doğrulama eklediniz, NG_VALIDATORS kaydını yaptınız, hata eşlemeleri döndürdünüz, registerOnValidatorChange aracılığıyla dinamik yeniden doğrulamayı desteklediniz ve tamamen tümleştirilmiş bir özel denetim için isteğe bağlı olarak NG_ASYNC_VALIDATORS ile AsyncValidator kullandınız.

Sıkça Sorulan Sorular

“Özel Denetimlerde Doğrulama” dersi ücretsiz mi?

Evet — “Özel Denetimlerde Doğrulama” 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.

“Özel Denetimlerde Doğrulama” dersinde ne öğreneceğim?

Özel denetimlerden doğrulayıcılar sağ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 4. dersidir.

“Özel Denetimlerde Doğrulama” 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

  1. ControlValueAccessor Arayüzü
  2. Değerleri Yazma ve Kaydetme
  3. Devre Dışı ve Dokunulmuş Durumları Ele Alma
  4. Özel Denetimlerde Doğrulama
← Angular Academy Sayfasına Dön