Form girdisini doğrulama

Doğruluk ve bütünlük için kullanıcı girdisini doğrulayarak genel veri kalitesini artırabilirsiniz. Bu sayfa, hem reaktif hem de şablon odaklı formlarda kullanıcı arayüzünden kullanıcı girdisinin nasıl doğrulanacağını ve yararlı doğrulama mesajlarının nasıl görüntüleneceğini gösterir.

Template-driven form'larda girdiyi doğrulama

Şablon odaklı bir forma doğrulama eklemek için, yerel HTML form doğrulamasıyla eklediğiniz aynı doğrulama niteliklerini eklersiniz. Angular, bu nitelikleri çerçevedeki doğrulayıcı fonksiyonlarla eşleştirmek için direktifler kullanır.

Bir form kontrolünün değeri her değiştiğinde, Angular doğrulamayı çalıştırır ve ya INVALID durumuyla sonuçlanan bir doğrulama hataları listesi ya da VALID durumuyla sonuçlanan null döndürür.

Daha sonra ngModel'i yerel bir şablon değişkenine dışa aktararak kontrolün durumunu inceleyebilirsiniz. Aşağıdaki örnek, NgModel'i name adlı bir değişkene dışa aktarır:

<input
            type="text"
            id="name"
            name="name"
            class="form-control"
            required
            minlength="4"
            appForbiddenName="bob"
            [(ngModel)]="actor.name"
            #name="ngModel"
          />

          @if (name.invalid && (name.dirty || name.touched)) {
            <div class="alert">
              @if (name.hasError('required')) {
                <div>Name is required.</div>
              }
              @if (name.hasError('minlength')) {
                <div>Name must be at least 4 characters long.</div>
              }
              @if (name.hasError('forbiddenName')) {
                <div>Name cannot be Bob.</div>
              }
            </div>
          }

Örnekle gösterilen aşağıdaki özelliklere dikkat edin.

• <input> öğesi HTML doğrulama niteliklerini taşır: required ve minlength. Ayrıca özel bir doğrulayıcı direktif olan forbiddenName'i taşır. Daha fazla bilgi için Özel doğrulayıcılar bölümüne bakın.

• #name="ngModel", NgModel'i name adlı yerel bir değişkene dışa aktarır. NgModel, altta yatan FormControl örneğinin birçok özelliğini yansıtır, böylece bunu şablonda valid ve dirty gibi kontrol durumlarını kontrol etmek için kullanabilirsiniz. Kontrol özelliklerinin tam listesi için AbstractControl API referansına bakın.

  • En dıştaki @if, bir dizi iç içe mesaj ortaya koyar, ancak yalnızca name geçersiz ve kontrol dirty veya touched ise.

  • Her iç içe @if, olası doğrulama hatalarından biri için özel bir mesaj sunabilir. required, minlength ve forbiddenName için mesajlar vardır.

• Kullanıcı izlenen alandaki değeri değiştirdiğinde, kontrol "dirty" olarak işaretlenir
• Kullanıcı form kontrol öğesinden odağı kaldırdığında, kontrol "touched" olarak işaretlenir

Reactive form'larda girdiyi doğrulama

Reaktif bir formda doğruluk kaynağı bileşen sınıfıdır. Şablondaki nitelikler aracılığıyla doğrulayıcılar eklemek yerine, doğrulayıcı fonksiyonları doğrudan bileşen sınıfındaki form kontrol modeline eklersiniz. Angular daha sonra kontrolün değeri her değiştiğinde bu fonksiyonları çağırır.

Doğrulayıcı fonksiyonlar

Doğrulayıcı fonksiyonlar senkron veya asenkron olabilir.

Performans nedenleriyle, Angular asenkron doğrulayıcıları yalnızca tüm senkron doğrulayıcılar geçtiğinde çalıştırır. Her biri hatalar ayarlanmadan önce tamamlanmalıdır.

Yerleşik doğrulayıcı fonksiyonlar

Kendi doğrulayıcı fonksiyonlarınızı yazmayı seçebilir veya Angular'ın bazı yerleşik doğrulayıcılarını kullanabilirsiniz.

Şablon odaklı formlarda nitelik olarak kullanılabilen aynı yerleşik doğrulayıcılar, required ve minlength gibi, Validators sınıfından fonksiyon olarak kullanılabilir. Yerleşik doğrulayıcıların tam listesi için Validators API referansına bakın.

Aktör formunu reaktif form olarak güncellemek için, aynı yerleşik doğrulayıcılardan bazılarını kullanın -- bu sefer, aşağıdaki örnekte olduğu gibi fonksiyon biçiminde.

actorForm = new FormGroup({
    name: new FormControl(this.actor.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i), // <-- Here's how you pass in the custom validator.
    ]),
    role: new FormControl(this.actor.role),
    skill: new FormControl(this.actor.skill, Validators.required),
  });

  get name() {
    return this.actorForm.get('name');
  }

  get skill() {
    return this.actorForm.get('skill');
  }

Bu örnekte, name kontrolü iki yerleşik doğrulayıcı (Validators.required ve Validators.minLength(4)) ve bir özel doğrulayıcı (forbiddenNameValidator) ayarlar.

Bu doğrulayıcıların tümü senkrondur, bu nedenle ikinci argüman olarak geçirilir. Fonksiyonları bir dizi olarak geçirerek birden fazla doğrulayıcıyı destekleyebileceğinize dikkat edin.

Bu örnek ayrıca birkaç getter yöntemi ekler. Reaktif bir formda, herhangi bir form kontrolüne her zaman üst grubundaki get yöntemiyle erişebilirsiniz, ancak bazen şablon için kısayol olarak getter'lar tanımlamak yararlıdır.

name girdisi için şablona tekrar bakarsanız, şablon odaklı örneğe oldukça benzerdir.

<input type="text" id="name" class="form-control" formControlName="name" required />

          @if (name.invalid && (name.dirty || name.touched)) {
            <div class="alert alert-danger">
              @if (name.hasError('required')) {
                <div>Name is required.</div>
              }
              @if (name.hasError('minlength')) {
                <div>Name must be at least 4 characters long.</div>
              }
              @if (name.hasError('forbiddenName')) {
                <div>Name cannot be Bob.</div>
              }
            </div>
          }

Bu form, şablon odaklı sürümden farklıdır çünkü artık herhangi bir direktif dışa aktarmaz. Bunun yerine, bileşen sınıfında tanımlanan name getter'ını kullanır.

required niteliğinin hala şablonda mevcut olduğuna dikkat edin. Doğrulama için gerekli olmasa da, erişilebilirlik amacıyla korunmalıdır.

Özel doğrulayıcılar tanımlama

Yerleşik doğrulayıcılar her zaman uygulamanızın tam kullanım durumuna uymaz, bu nedenle bazen özel bir doğrulayıcı oluşturmanız gerekir.

Önceki örnekteki forbiddenNameValidator fonksiyonunu düşünün. Bu fonksiyonun tanımı şöyle görünür.

/** An actor's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {forbiddenName: {value: control.value}} : null;
  };
}

Fonksiyon, belirli bir yasaklı adı tespit etmek için bir düzenli ifade alan ve bir doğrulayıcı fonksiyon döndüren bir fabrikadır.

Bu örnekte, yasaklı ad "bob"dur, bu nedenle doğrulayıcı "bob" içeren herhangi bir aktör adını reddeder. Başka bir yerde "alice"i veya yapılandıran düzenli ifadenin eşleştiği herhangi bir adı reddedebilir.

forbiddenNameValidator fabrikası, yapılandırılmış doğrulayıcı fonksiyonu döndürür. Bu fonksiyon bir Angular kontrol nesnesi alır ve kontrol değeri geçerliyse null veya bir doğrulama hatası nesnesi döndürür. Doğrulama hatası nesnesi genellikle adı doğrulama anahtarı olan 'forbiddenName' ve değeri hata mesajına ekleyebileceğiniz rastgele bir değerler sözlüğü olan {name} bir özelliğe sahiptir.

Özel asenkron doğrulayıcılar senkron doğrulayıcılara benzer, ancak bunun yerine daha sonra null veya bir doğrulama hatası nesnesi yayan bir Promise veya observable döndürmelidir. Bir observable durumunda, observable tamamlanmalıdır; bu noktada form doğrulama için yayılan son değeri kullanır.

Reactive form'lara özel doğrulayıcılar ekleme

Reaktif formlarda, fonksiyonu doğrudan FormControl'a geçirerek özel bir doğrulayıcı ekleyin.

actorForm = new FormGroup({
    name: new FormControl(this.actor.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i), // <-- Here's how you pass in the custom validator.
    ]),
    role: new FormControl(this.actor.role),
    skill: new FormControl(this.actor.skill, Validators.required),
  });

Template-driven form'lara özel doğrulayıcılar ekleme

Şablon odaklı formlarda, doğrulayıcı fonksiyonu saran direktifi şablona ekleyin. Örneğin, karşılık gelen ForbiddenValidatorDirective, forbiddenNameValidator etrafında bir sarmalayıcı görevi görür.

Angular, aşağıdaki örnekte gösterildiği gibi direktifin kendisini NG_VALIDATORS sağlayıcısına kaydetmesi nedeniyle doğrulama sürecindeki rolünü tanır. NG_VALIDATORS, genişletilebilir bir doğrulayıcılar koleksiyonuna sahip önceden tanımlanmış bir sağlayıcıdır.

providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ForbiddenValidatorDirective),
      multi: true,
    },
  ],
})
export class ForbiddenValidatorDirective implements Validator {
  readonly forbiddenName = input<string>('', {alias: 'appForbiddenName'});

  validate(control: AbstractControl): ValidationErrors | null {
    return this.forbiddenName
      ? forbiddenNameValidator(new RegExp(this.forbiddenName(), 'i'))(control)
      : null;
  }
}

Direktif sınıfı daha sonra Validator arayüzünü uygular, böylece Angular formlarıyla kolayca entegre olabilir. Hepsinin nasıl bir araya geldiğini anlamanıza yardımcı olmak için direktifin geri kalanı burada.

@Directive({
  selector: '[appForbiddenName]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ForbiddenValidatorDirective),
      multi: true,
    },
  ],
})
export class ForbiddenValidatorDirective implements Validator {
  readonly forbiddenName = input<string>('', {alias: 'appForbiddenName'});

  validate(control: AbstractControl): ValidationErrors | null {
    return this.forbiddenName
      ? forbiddenNameValidator(new RegExp(this.forbiddenName(), 'i'))(control)
      : null;
  }
}

ForbiddenValidatorDirective hazır olduğunda, etkinleştirmek için seçicisini appForbiddenName'i herhangi bir girdi öğesine ekleyebilirsiniz. Örneğin:

<input
            type="text"
            id="name"
            name="name"
            class="form-control"
            required
            minlength="4"
            appForbiddenName="bob"
            [(ngModel)]="actor.name"
            #name="ngModel"
          />

useExisting yerine useClass kullanırsanız, forbiddenName özelliğine sahip olmayan yeni bir sınıf örneği kaydedersiniz.

Kontrol durumu CSS sınıfları

Angular, kontrol özelliklerinin birçoğunu otomatik olarak form kontrol öğesine CSS sınıfları olarak yansıtır. Form kontrol öğelerini formun durumuna göre stilize etmek için bu sınıfları kullanın. Şu anda aşağıdaki sınıflar desteklenmektedir.

• .ng-valid
• .ng-invalid
• .ng-pending
• .ng-pristine
• .ng-dirty
• .ng-untouched
• .ng-touched
• .ng-submitted (yalnızca kapsayan form öğesi)

Aşağıdaki örnekte, aktör formu her form kontrolünün kenar rengini ayarlamak için .ng-valid ve .ng-invalid sınıflarını kullanır.

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

.alert div {
  background-color: #fed3d3;
  color: #820000;
  padding: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: .5rem;
}

select {
  width: 100%;
  padding: .5rem;
}

Çapraz alan doğrulama

Çapraz alan doğrulayıcı, bir formdaki farklı alanların değerlerini karşılaştıran ve bunları kombinasyon halinde kabul eden veya reddeden bir özel doğrulayıcıdır. Örneğin, birbirine uyumsuz seçenekler sunan bir formunuz olabilir, böylece kullanıcı A veya B'yi seçebilir, ancak ikisini birden seçemez. Bazı alan değerleri de diğerlerine bağlı olabilir; bir kullanıcının B'yi yalnızca A da seçiliyse seçmesine izin verilebilir.

Aşağıdaki çapraz doğrulama örnekleri şunları nasıl yapacağınızı gösterir:

• İki kardeş kontrolün değerlerine dayalı olarak reaktif veya şablon tabanlı form girdisini doğrulama,
• Kullanıcı formla etkileşime girdikten ve doğrulama başarısız olduktan sonra açıklayıcı bir hata mesajı gösterme.

Örnekler, aktörlerin Aktör Formunu doldurarak rollerinde aynı adı yeniden kullanmamalarını sağlamak için çapraz doğrulama kullanır. Doğrulayıcılar bunu aktör adları ve rollerin eşleşmediğini kontrol ederek yapar.

Reactive form'lara çapraz doğrulama ekleme

Formun yapısı aşağıdaki gibidir:

const actorForm = new FormGroup({
  'name': new FormControl(),
  'role': new FormControl(),
  'skill': new FormControl(),
});

name ve role'ün kardeş kontroller olduğuna dikkat edin. Her iki kontrolü tek bir özel doğrulayıcıda değerlendirmek için, doğrulamayı ortak bir ata kontrolde gerçekleştirmelisiniz: FormGroup. Alt kontrollerini sorgulamak ve değerlerini karşılaştırmak için FormGroup'u sorgularsınız.

Doğrulayıcıyı FormGroup'a eklemek için, oluşturma sırasında yeni doğrulayıcıyı ikinci argüman olarak geçirin.

const actorForm = new FormGroup(
  {
    'name': new FormControl(),
    'role': new FormControl(),
    'skill': new FormControl(),
  },
  {validators: unambiguousRoleValidator},
);

Doğrulayıcı kodu aşağıdaki gibidir.

/** An actor's name can't match the actor's role */
export const unambiguousRoleValidator: ValidatorFn = (
  control: AbstractControl,
): ValidationErrors | null => {
  const name = control.get('name');
  const role = control.get('role');

  return name && role && name.value === role.value ? {unambiguousRole: true} : null;
};

unambiguousRoleValidator doğrulayıcısı, ValidatorFn arayüzünü uygular. Bir Angular kontrol nesnesini argüman olarak alır ve form geçerliyse null, aksi takdirde ValidationErrors döndürür.

Doğrulayıcı, FormGroup'un get yöntemini çağırarak alt kontrolleri alır, ardından name ve role kontrollerinin değerlerini karşılaştırır.

Değerler eşleşmiyorsa, rol açıktır, her ikisi de geçerlidir ve doğrulayıcı null döndürür. Eşleşirlerse, aktörün rolü belirsizdir ve doğrulayıcı bir hata nesnesi döndürerek formu geçersiz olarak işaretlemelidir.

Daha iyi kullanıcı deneyimi sağlamak için, form geçersiz olduğunda şablon uygun bir hata mesajı gösterir.

@if (actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)) {
          <div class="cross-validation-error-message alert alert-danger">
            Name cannot match role or audiences will be confused.
          </div>
        }

Bu @if, FormGroup'ta unambiguousRoleValidator doğrulayıcısı tarafından döndürülen çapraz doğrulama hatası varsa hatayı görüntüler, ancak yalnızca kullanıcı formla etkileşimi tamamladıysa.

Template-driven form'lara çapraz doğrulama ekleme

Şablon odaklı bir form için, doğrulayıcı fonksiyonunu sarmak üzere bir direktif oluşturmanız gerekir. Aşağıdaki örnekte gösterildiği gibi, NG_VALIDATORS token'ını kullanarak bu direktifi doğrulayıcı olarak sağlarsınız.

@Directive({
  selector: '[appUnambiguousRole]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => UnambiguousRoleValidatorDirective),
      multi: true,
    },
  ],
})
export class UnambiguousRoleValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return unambiguousRoleValidator(control);
  }
}

Yeni direktifi HTML şablonuna eklemeniz gerekir. Doğrulayıcının formda en üst düzeyde kaydedilmesi gerektiğinden, aşağıdaki şablon direktifi form etiketine yerleştirir.

<form #actorForm="ngForm" appUnambiguousRole>

Daha iyi kullanıcı deneyimi sağlamak için, form geçersiz olduğunda uygun bir hata mesajı görünür.

@if (actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)) {
          <div class="cross-validation-error-message alert">Name cannot match role.</div>
        }

Bu, hem şablon odaklı hem de reaktif formlarda aynıdır.

Asenkron doğrulayıcılar oluşturma

Asenkron doğrulayıcılar, AsyncValidatorFn ve AsyncValidator arayüzlerini uygular. Bunlar senkron karşılıklarına çok benzer, ancak aşağıdaki farklılıklara sahiptir.

• validate() fonksiyonları bir Promise veya observable döndürmelidir,
• Döndürülen observable sonlu olmalıdır, yani bir noktada tamamlanmalıdır. Sonsuz bir observable'ı sonlu birine dönüştürmek için, observable'ı first, last, take veya takeUntil gibi bir filtreleme operatöründen geçirin.

Asenkron doğrulama, senkron doğrulamadan sonra gerçekleşir ve yalnızca senkron doğrulama başarılı olduğunda çalıştırılır. Bu kontrol, daha temel doğrulama yöntemleri zaten geçersiz girdi bulmuşsa formların potansiyel olarak pahalı asenkron doğrulama süreçlerini (HTTP isteği gibi) atlamasına olanak tanır.

Asenkron doğrulama başladıktan sonra, form kontrolü pending durumuna girer. Kontrolün pending özelliğini inceleyin ve devam eden doğrulama işlemi hakkında görsel geri bildirim vermek için kullanın.

Yaygın bir kullanıcı arayüzü kalıbı, asenkron doğrulama yapılırken bir döndürücü göstermektir. Aşağıdaki örnek, bunu şablon odaklı bir formda nasıl gerçekleştireceğinizi gösterir.

<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator />

@if (model.pending) {
  <app-spinner />
}

Özel bir asenkron doğrulayıcı uygulama

Aşağıdaki örnekte, bir asenkron doğrulayıcı aktörlerin henüz alınmamış bir role atanmasını sağlar. Yeni aktörler sürekli seçmelere katılıyor ve eski aktörler emekli oluyor, bu nedenle mevcut rollerin listesi önceden alınamaz. Olası rol girişini doğrulamak için, doğrulayıcı şu anda atanmış tüm aktörlerin merkezi bir veritabanına danışmak üzere asenkron bir işlem başlatmalıdır.

Aşağıdaki kod, AsyncValidator arayüzünü uygulayan UniqueRoleValidator doğrulayıcı sınıfını oluşturur.

@Injectable({providedIn: 'root'})
export class UniqueRoleValidator implements AsyncValidator {
  private readonly actorsService = inject(ActorsService);

  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    return this.actorsService.isRoleTaken(control.value).pipe(
      map((isTaken) => (isTaken ? {uniqueRole: true} : null)),
      catchError(() => of(null)),
    );
  }
}

actorsService özelliği, aşağıdaki arayüzü tanımlayan ActorsService token'ının bir örneğiyle başlatılır.

interface ActorsService {
  isRoleTaken: (role: string) => Observable<boolean>;
}

Gerçek bir uygulamada, ActorsService rolün mevcut olup olmadığını kontrol etmek için aktör veritabanına bir HTTP isteği yapmaktan sorumlu olacaktır. Doğrulayıcının bakış açısından, hizmetin gerçek uygulaması önemli değildir, bu nedenle örnek yalnızca ActorsService arayüzüne karşı kod yazabilir.

Doğrulama başladığında, UniqueRoleValidator mevcut kontrol değeriyle ActorsService isRoleTaken() yöntemine delege eder. Bu noktada kontrol pending olarak işaretlenir ve validate() yönteminden döndürülen observable zinciri tamamlanana kadar bu durumda kalır.

isRoleTaken() yöntemi, rolün mevcut olup olmadığını kontrol eden bir HTTP isteği gönderir ve sonuç olarak Observable<boolean> döndürür. validate() yöntemi, yanıtı map operatörü aracılığıyla doğrulama sonucuna dönüştürür.

Yöntem daha sonra, herhangi bir doğrulayıcı gibi, form geçerliyse null döndürür, geçerli değilse ValidationErrors döndürür. Bu doğrulayıcı, catchError operatörüyle olası hataları yönetir. Bu durumda, doğrulayıcı isRoleTaken() hatasını başarılı bir doğrulama olarak ele alır, çünkü bir doğrulama isteğinin başarısız olması rolün geçersiz olduğu anlamına gelmez. Hatayı farklı şekilde yönetebilir ve bunun yerine ValidationError nesnesini döndürebilirsiniz.

Bir süre sonra, observable zinciri tamamlanır ve asenkron doğrulama biter. pending bayrağı false olarak ayarlanır ve formun geçerliliği güncellenir.

Reactive form'lara asenkron doğrulayıcılar ekleme

Reaktif formlarda asenkron doğrulayıcı kullanmak için, doğrulayıcıyı bileşen sınıfının bir özelliğine enjekte ederek başlayın.

roleValidator = inject(UniqueRoleValidator);

Ardından, doğrulayıcı fonksiyonu doğrudan FormControl'a geçirerek uygulayın.

Aşağıdaki örnekte, UniqueRoleValidator'ın validate fonksiyonu, kontrolün asyncValidators seçeneğine geçirilerek ve ActorFormReactiveComponent'e enjekte edilen UniqueRoleValidator örneğine bağlanarak roleControl'a uygulanır. asyncValidators'ın değeri tek bir asenkron doğrulayıcı fonksiyon veya bir fonksiyonlar dizisi olabilir. FormControl seçenekleri hakkında daha fazla bilgi edinmek için AbstractControlOptions API referansına bakın.

const roleControl = new FormControl('', {
      asyncValidators: [this.roleValidator.validate.bind(this.roleValidator)],
      updateOn: 'blur',
    });

Template-driven form'lara asenkron doğrulayıcılar ekleme

Şablon odaklı formlarda asenkron doğrulayıcı kullanmak için, yeni bir direktif oluşturun ve üzerinde NG_ASYNC_VALIDATORS sağlayıcısını kaydedin.

Aşağıdaki örnekte, direktif gerçek doğrulama mantığını içeren UniqueRoleValidator sınıfını enjekte eder ve doğrulama yapılması gerektiğinde Angular tarafından tetiklenen validate fonksiyonunda çağırır.

@Directive({
  selector: '[appUniqueRole]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => UniqueRoleValidatorDirective),
      multi: true,
    },
  ],
})
export class UniqueRoleValidatorDirective implements AsyncValidator {
  private readonly validator = inject(UniqueRoleValidator);

  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    return this.validator.validate(control);
  }
}

Ardından, senkron doğrulayıcılarda olduğu gibi, etkinleştirmek için direktifin seçicisini bir girdiye ekleyin.

<input
            type="text"
            id="role"
            name="role"
            #role="ngModel"
            [(ngModel)]="actor.role"
            [ngModelOptions]="{updateOn: 'blur'}"
            appUniqueRole
          />

Asenkron doğrulayıcıların performansını optimize etme

Varsayılan olarak, tüm doğrulayıcılar her form değeri değişikliğinden sonra çalışır. Senkron doğrulayıcılarda, bu genellikle uygulama performansı üzerinde belirgin bir etkiye sahip değildir. Ancak asenkron doğrulayıcılar yaygın olarak kontrolü doğrulamak için bir tür HTTP isteği yapar. Her tuşa basıştan sonra bir HTTP isteği göndermek arka uç API'si üzerinde baskı oluşturabilir ve mümkünse bundan kaçınılmalıdır.

updateOn özelliğini change (varsayılan) yerine submit veya blur olarak değiştirerek form geçerliliği güncellemesini geciktirebilirsiniz.

Şablon odaklı formlarda, özelliği şablonda ayarlayın.

<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}" />

Reaktif formlarda, özelliği FormControl örneğinde ayarlayın.

new FormControl('', {updateOn: 'blur'});

Reaktif formlarda doğrulayıcıları dinamik olarak yönetme

Karmaşık reaktif formlarda, kullanıcı girdisine veya uygulama durumuna göre doğrulayıcı eklemeniz, kaldırmanız veya değiştirmeniz gerekebilir. Angular, form kontrollerini yeniden oluşturmadan çalışma zamanında doğrulayıcıları yönetmek için AbstractControl üzerinde çeşitli metotlar sağlar.

Doğrulayıcı ekleme ve kaldırma

addValidators ve removeValidators metotları, bir kontrolün doğrulayıcılarını başlatma işleminden sonra değiştirmenize olanak tanır.

onCountryChange(country: string) {
    const postalCodeControl = this.profileForm.get('postalCode');

    if (country === 'US') {
      // ABD posta kodları için doğrulayıcı ekle
      postalCodeControl.addValidators([Validators.required, Validators.pattern(/^\d{5}$/)]);
    } else {
      // ABD değilken doğrulayıcıları kaldır
      postalCodeControl.removeValidators([Validators.required]);
    }

    postalCodeControl.updateValueAndValidity();
}

Tüm doğrulayıcıları değiştirme

Bir kontroldeki mevcut tüm senkron doğrulayıcıları değiştirmek için setValidators, tüm doğrulayıcıları kaldırmak için ise clearValidators kullanın.

toggleStrictNameValidation(isStrict: boolean) {
  const nameControl = this.profileForm.get('name');

  if (enable) {
    // Katı doğrulama kurallarını ayarla
    nameControl.setValidators([
      Validators.required,
      Validators.minLength(3),
      Validators.pattern(/^[a-zA-Z]+$/),
    ]);
  } else {
    // Tüm doğrulayıcıları temizle
    nameControl.clearValidators();
  }

  nameControl.updateValueAndValidity();
}

Aynı desen, addAsyncValidators, removeAsyncValidators, setAsyncValidators ve clearAsyncValidators kullanılarak asenkron doğrulayıcılar için de geçerlidir.

Doğrulama güncellemelerini tetikleme

Doğrulayıcıları değiştirdikten sonra, kontrolün doğrulama durumunu yeniden hesaplamak için updateValueAndValidity metodunu çağırın. Bu metot, güncelleme davranışını kontrol etmek için seçenekler kabul eder.

// Kontrolü güncelle ve üst öğeyi bilgilendir
control.updateValueAndValidity();

// Yalnızca kontrolü güncelle, üst öğeyi bilgilendirme veya olay yayma
control.updateValueAndValidity({onlySelf: true, emitEvent: false});

Yerel HTML form doğrulaması ile etkileşim

Angular varsayılan olarak kapsayan <form>'a novalidate niteliği ekleyerek yerel HTML form doğrulamasını devre dışı bırakır ve bu nitelikleri çerçevedeki doğrulayıcı fonksiyonlarla eşleştirmek için direktifler kullanır. Angular tabanlı doğrulamayla birlikte yerel doğrulamayı kullanmak istiyorsanız, ngNativeValidate direktifiyle yeniden etkinleştirebilirsiniz. Ayrıntılar için API belgelerine bakın.