Angular 19’da Reaktif Form Doğrulama Kılavuzu: Adım Adım Uygulama

Angular uygulamalarında form doğrulaması, veri bütünlüğünü sağlamanın yanı sıra kullanıcı deneyimini de önemli ölçüde iyileştirir. Angular 19’un sunduğu reaktif formlar aracıyla, karmaşık doğrulama mantığını kolayca yönetebilir ve dinamik form alanları oluşturabilirsiniz. Bu kılavuzda, yerleşik doğrulayıcılardan özel doğrulayıcılara, çapraz alan kontrollerinden asenkron doğrulamaya kadar tüm temel ve ileri düzey teknikleri adım adım inceleyeceğiz.

Angular 19’un reaktif form doğrulama sistemini kullanmak için öncelikle projenizin yapılandırmasını gözden geçirmeniz gerekir. Standalone bileşenler kullanıyorsanız, gerekli modülleri doğrudan bileşen tanımında import edebilirsiniz. Bu yaklaşım, bağımlılık yönetimini basitleştirirken performansı da artırır. ReactiveFormsModule yerine doğrudan ReactiveFormsModule’ı bileşeninizin import listesine ekleyerek başlayabilirsiniz.

Reaktif Formlarla Proje Kurulumu

Angular 19’da reaktif formlar kullanmak için öncelikle projenizin app.module.ts dosyasını inceleyin. Eğer standalone bileşenler kullanıyorsanız, form işlemleri için gerekli modülleri doğrudan bileşen düzeyinde tanımlayabilirsiniz. Aşağıdaki kod parçası, temel bir kayıt formunun nasıl yapılandırılacağını göstermektedir:

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-kayit-formu',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './kayit-formu.component.html'
})
export class KayitFormuComponent {
  private formBuilder = inject(FormBuilder);

  form = this.formBuilder.group({
    eposta: ['', [Validators.required, Validators.email]],
    sifre: ['', [Validators.required, Validators.minLength(8)]],
    sifreTekrar: ['', Validators.required]
  });
}

Bu yapılandırma, form alanlarının tanımlanmasını ve temel doğrulama kurallarının uygulanmasını sağlar. FormBuilder sınıfı, form kontrollerinin oluşturulmasını ve yönetilmesini kolaylaştıran bir yardımcı araçtır. Validators sınıfı ise standart doğrulama kurallarını sunar.

Form Hatalarını Görüntüleme ve Kullanıcı Geri Bildirimleri

Kullanıcılara form hatalarını net bir şekilde iletmek, hem deneyimi iyileştirir hem de veri doğruluğunu artırır. Angular’ın şablonlara yönelik direktifleri, form kontrollerinin durumuna göre dinamik olarak içerik oluşturmanıza olanak tanır. Aşağıdaki örnek, e-posta alanındaki bir hatanın nasıl görüntüleneceğini göstermektedir:

<input formControlName="eposta" type="email" placeholder="E-posta adresinizi girin">
<div *ngIf="form.get('eposta')?.invalid && (form.get('eposta')?.dirty || form.get('eposta')?.touched)">
  Lütfen geçerli bir e-posta adresi girin.
</div>

Form gönderimi başarısız olduğunda tüm alanları otomatik olarak touched olarak işaretlemek için markAllAsTouched() yöntemini kullanabilirsiniz. Bu, kullanıcıların henüz etkileşime girmedikleri alanlardaki hataları da görmelerini sağlar:

formIslemiBasarisiz() {
  this.form.markAllAsTouched();
}

Özel Doğrulayıcılar ile Esneklik Kazanın

Standart doğrulayıcılar bazı durumlarda yetersiz kalabilir. Örneğin, kullanıcı girişlerinde boşluk karakterlerinin engellenmesi gerekebilir. Bu tür özel kuralları uygulamak için Angular’ın ValidatorFn arayüzünden yararlanabilirsiniz. Aşağıdaki kod, boşluk içeren girişleri reddeden bir doğrulayıcıyı tanımlamaktadır:

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

export function boslukKontrol(): ValidatorFn {
  return (kontrol: AbstractControl): ValidationErrors | null => {
    const deger = (kontrol.value || '').trim();
    return deger.length > 0 ? null : { boslukVar: true };
  };
}

Bu doğrulayıcıyı form alanınıza ekleyerek kullanıcıların sadece boşluk karakterlerinden oluşan girişler yapmasını engelleyebilirsiniz. Özel doğrulayıcılar, uygulamanızın gereksinimlerine göre özelleştirilebilir ve yeniden kullanılabilir yapılar sunar.

Çapraz Alan Doğrulama ve Şifre Eşleştirme

Bazı senaryolarda birden fazla form alanının birlikte değerlendirilmesi gerekebilir. Örneğin, şifre ve şifre tekrarı alanlarının eşleşip eşleşmediğini kontrol etmek yaygın bir ihtiyaçtır. Angular’ın AbstractControl sınıfını kullanarak bu tür çapraz alan doğrulamalarını uygulamak mümkündür:

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

export function sifreEslesme(group: AbstractControl): ValidationErrors | null {
  const sifre = group.get('sifre')?.value;
  const sifreTekrar = group.get('sifreTekrar')?.value;
  
  return sifre === sifreTekrar ? null : { sifreEslesmiyor: true };
}

Bu doğrulayıcıyı form grubuna ekleyerek şifre alanlarının eşleşmesini zorunlu kılabilirsiniz. Form grubunun tanımlanması sırasında ikinci parametre olarak doğrulama fonksiyonunu geçirmeniz gerekmektedir:

form = this.formBuilder.group({
  sifre: ['', [Validators.required]],
  sifreTekrar: ['', [Validators.required]]
}, { validators: sifreEslesme });

Asenkron Doğrulama ile Gerçek Zamanlı Kontroller

Kullanıcıların girdiği kullanıcı adlarının daha önce alınmış olup olmadığını kontrol etmek gibi işlemler asenkron doğrulama gerektirebilir. Angular, bu tür senaryolar için asenkron doğrulayıcıları destekler. Aşağıdaki örnek, kullanıcı adının mevcut olup olmadığını API üzerinden kontrol eden bir doğrulayıcıyı göstermektedir:

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError, delay } from 'rxjs/operators';

export function kullaniciAdiMevcutMu(): AsyncValidatorFn {
  return (kontrol: AbstractControl): Observable<ValidationErrors | null> => {
    const kullaniciAdi = kontrol.value;
    
    return of(kullaniciAdi).pipe(
      delay(500), // Simüle edilmiş gecikme
      map((ad) => (ad === 'kullanici123' ? { kullaniciAdiMevcut: true } : null)),
      catchError(() => of(null))
    );
  };
}

Bu doğrulayıcıyı form alanına ekleyerek kullanıcı adı girişinin gerçek zamanlı olarak doğrulanmasını sağlayabilirsiniz. Asenkron doğrulama sırasında kullanıcıya "Kontrol ediliyor..." gibi geri bildirimler sunmak da önemlidir.

Angular 19’un reaktif form doğrulama sistemi, uygulamanızın veri bütünlüğünü sağlamanın yanı sıra kullanıcı deneyimini de önemli ölçüde iyileştirmenize olanak tanır. Yerleşik doğrulayıcılarla başlayıp özel, çapraz alan ve asenkron doğrulayıcılarla gelişmiş senaryolara geçiş yapabilirsiniz. Bu kılavuzda ele alınan teknikleri uygulayarak form doğrulama süreçlerinizi optimize edebilir ve kullanıcılarınıza daha akıcı bir deneyim sunabilirsiniz. Gelecekteki Angular sürümlerinde yer alabilecek yenilikleri takip ederek doğrulama sistemlerinizi sürekli olarak güncel tutmayı unutmayın.