Reaktif Formlarda Karmaşık Doğrulama İşlemleri Nasıl Yönetilir?

Bugün, reaktif formların karmaşık dünyasında bir yolculuğa çıkıyoruz. Doğrulama işlemleri, formlarımızın gizli kahramanlarıdır; kullanıcıları yanlış yapmaktan koruyan görünmez kalkanlar gibi. Ama bazen bu kalkanlar, Rubik küpü kadar karmaşık hale gelebilir. Neyse ki, biz geliştiriciler için imkansız diye bir şey yoktur, sadece henüz çözülmemiş bulmacalar vardır!

1. Reaktif Formların Anatomisi: Parçadan Bütüne

Reaktif bir form, tıpkı iyi bir orkestra gibidir. Her enstrüman (form alanı) kendi partisyonunu çalar, ama hepsi birlikte muhteşem bir senfoni oluşturur.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({...})
export class ComplexFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmPassword: ['', Validators.required]
    }, { validator: this.passwordMatchValidator });
  }

  passwordMatchValidator(g: FormGroup) {
    return g.get('password').value === g.get('confirmPassword').value
      ? null : {'mismatch': true};
  }
}

Bu formumuz, sanki her bir alan bir süper kahraman gibi. "Name" uzunluk kontrolü yapıyor, "Email" geçerlilik denetimi yapıyor, şifreler ise gizli ajanlar gibi birbirlerini kontrol ediyor. Avengers, ama form versiyonu!

2. Asenkron Doğrulama: Sabırlı Olmanın Erdemi

Bazen doğrulama işlemi, uzak bir sunucuya seyahat etmeyi gerektirir. Bu, formumuzun küçük bir tatile çıkması gibidir - ama endişelenmeyin, her zaman bir kartpostal (yanıt) ile geri döner!

import { Injectable } from '@angular/core';
import { AsyncValidator, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError, debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class UniqueUsernameValidator implements AsyncValidator {
  constructor(private userService: UserService) {}

  validate(control: AbstractControl): Observable {
    return this.userService.checkUsernameAvailability(control.value).pipe(
      debounceTime(300),
      distinctUntilChanged(),
      map(isAvailable => (isAvailable ? null : { uniqueUsername: true })),
      catchError(() => of(null))
    );
  }
}

// Kullanımı
this.myForm = this.fb.group({
  username: ['', {
    validators: [Validators.required],
    asyncValidators: [this.uniqueUsernameValidator.validate.bind(this.uniqueUsernameValidator)],
    updateOn: 'blur'
  }]
});

Bu validator, kullanıcı adının benzersiz olup olmadığını kontrol etmek için sunucuya bir seyahat yapar. Tıpkı bir dedektif gibi, "Bu kullanıcı adı daha önce kullanılmış mı?" diye soruşturur. Ve bunu yaparken, gereksiz istekleri önlemek için `debounceTime` ve `distinctUntilChanged` gibi RxJS operatörlerini kullanır. Yani, hem zeki hem de ekonomik!

3. Koşullu Doğrulama: Formun Kameleon Hali

Bazen formlarımız, ortama uyum sağlayan bir kameleon gibi olmalıdır. Bir alanın doğrulama kuralları, başka bir alanın değerine bağlı olarak değişebilir. İşte size, formunuzu bir doğrulama ninja'sına dönüştürecek bir örnek:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({...})
export class DynamicFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      employmentStatus: ['', Validators.required],
      company: [''],
      yearsEmployed: ['']
    });

    this.myForm.get('employmentStatus').valueChanges.subscribe(status => {
      const companyControl = this.myForm.get('company');
      const yearsEmployedControl = this.myForm.get('yearsEmployed');

      if (status === 'employed') {
        companyControl.setValidators(Validators.required);
        yearsEmployedControl.setValidators([Validators.required, Validators.min(0)]);
      } else {
        companyControl.clearValidators();
        yearsEmployedControl.clearValidators();
      }

      companyControl.updateValueAndValidity();
      yearsEmployedControl.updateValueAndValidity();
    });
  }
}

Bu form, kullanıcının istihdam durumuna göre şekil değiştirir. "Çalışıyor musunuz?" sorusuna "Evet" cevabı gelirse, aniden yeni doğrulama kuralları ortaya çıkar. Sanki form, kullanıcının cevabına göre kıyafet değiştiren bir sihirbaz gibi!

4. Özel Doğrulama Fonksiyonları: Doğrulamanın Sanat Hali

Bazen standart doğrulama kuralları yetmez ve kendi doğrulama sanatınızı yaratmanız gerekir. İşte size, adeta bir Picasso tablosu kadar karmaşık ve güzel bir özel doğrulama örneği:

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

export function complexPasswordValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const value = control.value;
    const hasUpperCase = /[A-Z]/.test(value);
    const hasLowerCase = /[a-z]/.test(value);
    const hasNumeric = /[0-9]/.test(value);
    const hasSpecialChar = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]+/.test(value);
    
    const valid = hasUpperCase && hasLowerCase && hasNumeric && hasSpecialChar;
    
    return valid ? null : {
      complexPassword: {
        uppercase: !hasUpperCase,
        lowercase: !hasLowerCase,
        numeric: !hasNumeric,
        specialChar: !hasSpecialChar
      }
    };
  };
}

// Kullanımı
this.myForm = this.fb.group({
  password: ['', [Validators.required, Validators.minLength(8), complexPasswordValidator()]]
});

Bu doğrulayıcı, şifreleri adeta bir dedektif gibi inceler. Büyük harf var mı? Küçük harf? Sayı? Özel karakter? Hepsini tek tek kontrol eder. Kullanıcılarınızın şifreleri artık Fort Knox kadar güvenli olacak!

Formların Şiir Hali

Reaktif formlarda karmaşık doğrulama işlemleri, adeta bir şiir yazmak gibidir. Her dize (form alanı) kendi başına anlamlı olmalı, ama hepsi bir araya geldiğinde muhteşem bir eser ortaya çıkmalıdır.

Unutmayın, iyi bir form sadece veri toplamaz, aynı zamanda kullanıcıya rehberlik eder, onu yönlendirir ve hatta bazen eğlendirir. Formlarınız, kullanıcılarınızla dans eden birer partner gibi olsun - nazik, anlayışlı ama aynı zamanda kurallara uyan.

Şimdi gidin ve o muhteşem, karmaşık ama bir o kadar da zarif formlarınızı yaratın! Kim bilir, belki de bir gün kullanıcılarınız "Bu form bir şaheser!" diyecekler. Ve siz de gururla gülümseyip "Evet, bu reaktif form doğrulama sanatının bir eseri!" diyebileceksiniz.

Formlarınız reaktif, doğrulamalarınız proaktif olsun! Ve unutmayın, her hata mesajı, kullanıcıya verdiğiniz küçük bir sevgi notudur. Onları akıllıca kullanın!