Form Doğrulama
Form doğrulama, Angular uygulamalarında kullanıcı girdilerinin doğruluğunu ve tutarlılığını sağlamak için kritik bir özelliktir. Modern web uygulamaları ve SPA’larda veri bütünlüğünü korumak, kullanıcı deneyimini geliştirmek ve güvenliği artırmak için form doğrulama zorunludur. Angular, hem reaktif hem de template-driven formlar üzerinden güçlü bir doğrulama mekanizması sunar. Bu mekanizmalar sayesinde, form elemanlarının durumunu ve değerlerini merkezi bir şekilde yönetebilir, bileşenler arası veri akışını ve lifecycle yönetimini etkin biçimde kontrol edebilirsiniz.
Bu rehberde, Angular’da FormBuilder, FormGroup, FormControl ve Validators kullanarak reaktif form doğrulama yöntemlerini öğreneceksiniz. Formlar üzerinde senkron ve asenkron doğrulamalar yapmayı, valueChanges ile veri akışını takip etmeyi ve lifecycle hook’ları kullanarak form durumunu yönetmeyi keşfedeceksiniz. Ayrıca, performans optimizasyonu, gereksiz render’ları önleme ve prop drilling’i azaltma gibi gelişmiş teknikler üzerinde durulacaktır. Öğrendiklerinizle, Angular projelerinde yeniden kullanılabilir, güvenli ve kullanıcı dostu formlar oluşturabileceksiniz.
Temel Örnek
typescriptimport { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-basic-form',
template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()"> <label for="username">Kullanıcı Adı:</label> <input id="username" formControlName="username" />
<div *ngIf="userForm.get('username')?.invalid && userForm.get('username')?.touched">
Kullanıcı adı zorunludur ve en az 4 karakter olmalıdır. </div>
<label for="email">E-posta:</label>
<input id="email" formControlName="email" />
<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
Geçerli bir e-posta giriniz.
</div>
<button type="submit" [disabled]="userForm.invalid">Gönder</button>
</form>
`
})
export class BasicFormComponent {
userForm: FormGroup;
constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
if (this.userForm.valid) {
console.log('Form gönderildi:', this.userForm.value);
}
}
}Bu temel örnek, Angular’da reaktif form doğrulama konseptini göstermektedir. FormBuilder ile oluşturulan FormGroup, birden fazla FormControl’ü merkezi olarak yönetir. Her FormControl, Validators aracılığıyla doğrulama kurallarını içerir. HTML şablonunda formControlName kullanılarak kontroller bağlanır ve *ngIf ile kullanıcıya anlık doğrulama mesajları gösterilir. onSubmit() metodunda formun geçerliliği kontrol edilerek yalnızca geçerli veriler işlenir. Bu yapı, prop drilling’i azaltır, gereksiz yeniden render’ları önler ve bileşenlerin yeniden kullanılabilirliğini artırır.
Pratik Örnek
typescriptimport { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-advanced-form',
template: `
<form [formGroup]="profileForm" (ngSubmit)="submitProfile()"> <label for="fullName">Ad Soyad:</label> <input id="fullName" formControlName="fullName" />
<div *ngIf="profileForm.get('fullName')?.invalid && profileForm.get('fullName')?.touched">
Ad Soyad zorunludur ve en az 4 karakter olmalıdır. </div>
<label for="email">E-posta:</label>
<input id="email" formControlName="email" />
<div *ngIf="profileForm.get('email')?.invalid && profileForm.get('email')?.touched">
Geçerli bir e-posta giriniz.
</div>
<label for="age">Yaş:</label>
<input id="age" type="number" formControlName="age" />
<div *ngIf="profileForm.get('age')?.invalid && profileForm.get('age')?.touched">
Yaş 18 ile 99 arasında olmalıdır.
</div>
<button type="submit" [disabled]="profileForm.invalid">Kaydet</button>
</form>
`
})
export class AdvancedFormComponent implements OnInit {
profileForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.profileForm = this.fb.group({
fullName: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]],
age: [null, [Validators.required, Validators.min(18), Validators.max(99)]]
});
this.profileForm.valueChanges.pipe(debounceTime(300)).subscribe(value => {
console.log('Form değerleri değişti:', value);
});
}
submitProfile() {
if (this.profileForm.valid) {
console.log('Profil kaydedildi:', this.profileForm.value);
}
}
}Pratik örnek, yaş alanı ekleyerek Validators.min ve Validators.max ile aralık doğrulamasını göstermektedir. valueChanges ile debounceTime kullanımı, hızlı veri girişlerinde performans optimizasyonu sağlar ve gereksiz render’ları engeller. Reaktif yapı, modüler ve yeniden kullanılabilir bileşenler oluşturmayı kolaylaştırır. Formun durumu, lifecycle hook’lar ile senkronize edilerek uygulamanın genel veri akışına uyum sağlar. Bu yöntem, karmaşık ve dinamik formlar geliştirirken temiz veri akışı ve etkili state yönetimi sunar.
Angular’da form doğrulama için en iyi uygulamalar; FormBuilder ile modüler form yapısı kurmak, Validators ile tutarlı doğrulama kuralları kullanmak ve FormControl’ün state’ini doğrudan değiştirmekten kaçınmaktır. Prop drilling’i azaltmak ve gereksiz render’ları önlemek için state yönetimi merkezi olmalıdır. Hata ayıklamada Angular DevTools ve console.log etkili araçlardır. Güvenlik açısından, istemci doğrulaması yanı sıra sunucu doğrulaması da yapılmalıdır. Karmaşık doğrulama kuralları için özel validator’lar veya servisler kullanılmalıdır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| FormGroup | Birden fazla form kontrolünü grup olarak yönetir | this.fb.group({fullName: ['', Validators.required]}) |
| FormControl | Tek bir form kontrolü | new FormControl('', Validators.email) |
| FormBuilder | Formları oluşturmak için servis | constructor(private fb: FormBuilder) |
| Validators | Hazır doğrulama kuralları | Validators.required, Validators.minLength(4) |
| valueChanges | Formdaki değişiklikleri gözlemlemek | this.profileForm.valueChanges.subscribe(val => ...) |
| ngSubmit | Form gönderim olayını yakalar | <form (ngSubmit)="submitProfile()"> |
Form doğrulamada uzmanlaşmak, Angular’da reaktif formlar, merkezi state yönetimi ve temiz veri akışı kavramlarını anlamakla mümkündür. Öğrenciler, güvenli, kullanıcı dostu ve yeniden kullanılabilir formlar oluşturmayı öğrenir. Sonraki adımlar olarak dinamik FormArray kullanımı, asenkron doğrulamalar ve özel validator servisleri incelenebilir. Bu bilgiler, SPA uygulamalarında sağlam form altyapısı oluşturmak ve kullanıcı deneyimini iyileştirmek için temel oluşturur. Angular dokümantasyonu ve uygulamalı örnekler ek kaynak olarak önerilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek