Angular'da Reaktif Formlar

Bu derste, Angular uygulamalarındaki karmaşık form senaryolarını yöneten reaktif formları öğreneceksiniz.

Reaktif Formlar Nedir?

Reaktif formlar, formları programatik bir yaklaşımla oluşturup yönetir ve daha fazla esneklik ile doğrulama olanağı sunar.

ReactiveFormsModule'u İçe Aktarma

Reaktif formları kullanmak için modülünüze ReactiveFormsModule aktarın:

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

FormGroup Oluşturma

Bileşen sınıfınızda bir form grubu tanımlayın:

this.myForm = new FormGroup({
  name: new FormControl('')
});

Formu Şablona Bağlama

Form grubunuzu bağlamak için şablonda formGroup yönergesini kullanın:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

Form Doğrulama

Girdinin doğruluğunu güvence altına almak için reaktif formlara kolayca doğrulayıcılar eklenebilir:

name: new FormControl('', Validators.required)

Form Gönderimini Yönetme

Bileşen sınıfınızdaki gönderme olaylarına abone olarak form gönderimlerini yönetin:

onSubmit() {
  console.log(this.myForm.value);
}

FormBuilder Kullanma

FormBuilder hizmeti form oluşturmayı basitleştirir:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

Özet

Artık reaktif formlar oluşturmayı, doğrulamaları yönetmeyi ve form durumunu etkili bir şekilde kontrol etmeyi biliyorsunuz. Tebrikler!