Angular Reactive Formları hakkında hızlıca bir eğitime hazır mısınız? Bu makaleyi angular.io sitesindeki dokümantasyonlardan yararlanarak hazırladım.

Angular’da kaç şekilde form hazırlayabiliriz?

Formlar kullanıcının oturum açması, uygulama üzerinden kayıt girişi/düzenlemesi ve geribildirim göndermesi gibi işlemleri yapabilmemizi sağlar. HTML5’te form etiketini ve input gibi diğer form elemanlarını bilirsiniz. Peki Angular’da formlar kaç şekilde ve nasıl hazırlanabiliyor? İki-yollu bağlama (binding) bu formlarda nasıl kullanılıyor? Validasyonlar nasıl yapılabiliyor? Form olayları neler? Şimdi bunları izah edelim.

Angular iki yaklaşımla form hazırlamamızı sağlıyor: Reactive ve Şablon-güdümlü (Template-driven).  Bu iki yaklaşım form verisini farklı şekilde ele alıyorlar ve farklı avantajları var.

• Reactive Formlar daha düzgündür. Daha ölçeklenebilir, yeniden-kullanılabilir ve test edilebilirdir. Eğer formlar uygulamanızda anahtarsa veya uygulamayı geliştirirken reactive paternleri kullanıyorsanız formlar için Reactive formları kullanın.
• Şablon-güdümlü formlar uygulamanıza basit bir form eklemek için uygundur, örneğin e-bülten listesine kaydolma formu gibi. Bu formları uygulamaya eklemek kolaydır fakat reactive formlar gibi ölçeklenebilir değildirler.

Ortak Noktaları

Reactive formlar bir çok açıdan daha üstündür fakat hem reactive formlar hem şablon-güdümlü formlar aynı altyapıyı paylaşır.

• FormControl her bir form denetiminin değerini ve validasyon durumunu izler.
• FormGroup form denetimleri koleksiyonunun aynı şekilde değerlerini ve durumlarını izler.
• FormArray form denetimleri dizisinin aynı şekilde değerlerini ve durumlarını izler.
• ControlValueAccessor Angular FormControl ile köprü oluşturur yani nesnelerle ile yerel DOM elemanları arasında.

Reactive formlarda etiketler için component’de FormControl nesneleri oluşturulur. Şablon-güdümlü formlarda ise component’teki ilkel değişkenler ngModel niteliği ile etikete bağlanır (bind edilir). Özellikle gelişmiş formlarda hatta mümkünse her form için Reactive formların yani FormControl nesnelerinin kullanılmasını tavsiye ederiz. Bu nedenle yazının geri kalanında Reactive Formlara odaklanacağız.

Reactive Formlar

1. Reactive formları kullanabilmek için modülümüze ReactiveFormsModule’ü dahil etmemiz gerekiyor.
2. component’te formElemaniNesnesi = new FormControl(”); şeklinde her bir form elemanı için nesnelerimizi tanımlamamız gerekiyor. Tırnakla verilen parametre elemanın ilk değeridir.
3. html şablonumuzda <input type=“text” [formControl]=“formElemaniNesnesi”> şeklinde nesnemizle etiketimizi bağlamamız gerekiyor.

Bir reactive form denetiminin mevcut değerini html şablonumuzda herhangi bir yerde görüntülemek için aşağıdaki ifadeyi kullanabilirsiniz:

{{ formElemaniNesnesi.value }}

Form elemanlarının değerini sonradan değiştirmek isterseniz setValue metodunu kullanabilirsiniz. Örneğin aşağıda form elemanımızı güncelleyen updateName() adında bir fonksiyon yazdık (fonksiyonlarımızı component’te tanımlıyoruz elbette), bu fonksiyonu çağırdığınızda form elemanımızın değeri değişecektir:

updateName()

{

    this.formElemaniNesnesi.setValue(‘Nancy’);

}

Bu fonksiyonu mesela bir butona tıklandığında çağırmak isterseniz html’de butonun click olayında çağırın. Örneğin:

<button (click)=“updateName()”>Update Name</button>

Form Denetimlerini Gruplamak

Birden fazla form denetimini bir grup içerisine alıp form denetimleri koleksiyonu oluşturabiliriz, bunun için component’imizde mesela profileForm adında bir form grubu tanımlıyoruz, içinde firstName ve lastName adında iki adet form denetimi var:

profileForm = new FormGroup({

   firstName: new FormControl(”),

   lastName: new FormControl(”),

});

Bu grubu forma bağlamak için elemanları nesnelere bağladığımız gibi <form> etiketini de formGroup niteliği ile gruba bağlamamız gerekiyor:

<form [formGroup]=“profileForm”>

<label> First Name: <input type=“text” formControlName=“firstName”> </label>

<label> Last Name: <input type=“text” formControlName=“lastName”> </label>

</form>

Form Bilgilerini Kaydetmek

Form bir butona tıklanarak gönderildiğinde form bilgilerini kaydetmek için bir fonksiyon çalıştırmamız gerekiyor, bu fonksiyonu butonun click olayında çağırabileceğimiz gibi formun submit olayında da çalıştırabiliriz. Örneğin:

<form [formGroup]=“profileForm” (ngSubmit)=“onSubmit()”>

Form, submit tipinde bir “kaydet” butonuna tıklandığında onSubmit() fonksiyonu çalıştırılacaktır. Bundan sonra component’inizde onSubmit fonksiyonunu tanımlayıp servisinizi çağırarak veritabanına kaydetme işlemini yapabilirsiniz. onSubmit() fonksiyonu içerisinde formdaki denetimlerinin değerlerine aşağıdaki şekilde topluca ulaşabilirsiniz:

this.profileForm.value

Form Denetimlerini FormBuilder Sınıfı ile Oluşturmak

Her bir form denetimini nesnesini tek tek tanımlamak yerine FormBuilder ile bu işi daha kolay hale getirebiliriz:

Öncelikle Dependency Injection ile component’in yapıcı metodundan FormBuilder servisimizi alalım:

constructor(private fb: FormBuilder) { }

FormBuilder servisi üç metoda sahiptir:  control(), group(), vearray().

Aşağıda daha gelişmiş iç içe form group barındıran bir form modelini form builder’la oluşturduk:

profileForm = this.fb.group({

  firstName: [”],

  lastName: [”],

  address: this.fb.group({

    street: [”],

    city: [”],

    state: [”],

    zip: [”]

  }),

});

Basit Form Validasyonu

Form validasyonu kullanıcının form elemanlarına değerleri doğru girip girmediğini anlamımızı sağlar. Aşağıda firstName alanın gerekli (zorunlu) bir alan olduğunu belirttik, bunun için Validators.required statik metodunu kullandık:

profileForm = this.fb.group({

   firstName: [”, Validators.required], lastName: [”],

   address: this.fb.group({

        street: [”], city: [”], state: [”], zip: [”] }),

});

Formun validasyon durumunu isterseniz aşağıdaki ifade ile görüntüleyebilirsiniz:

{{ profileForm.status }}

Form validasyonu hakkında ayrıntılı bilgi için https://angular.io/guide/form-validation sayfasını okuyabilirsiniz.