Herkese Merhaba,
Önceki yazımda Lazy Loading Nedir? konusunu detaylı bir şekilde incelemiştik. Bu yazımda ise Reactive Forms’dan bahsedeceğiz. Öncelikle Angular Form Yaklaşımlarını inceleyelim…
Angular Form Yaklaşımları Nelerdir?
Angular’da iki tür form yaklaşımı vardır: Template Driven Forms ve Reactive Forms. Template Driven Forms, template içinde ngModel direktifleri kullanılarak form kontrolleri oluşturulurken, Reactive Forms programatik olarak FormControl, FormGroup ve FormArray sınıfları kullanılarak oluşturulur.
Reactive Forms, Template Driven Forms’a alternatif bir yaklaşımdır ve daha esnek, ölçeklenebilir ve karmaşık formlar için daha uygundur. Reactive Forms, Angular formlarının güçlü yönlerini kullanarak, formdaki herhangi bir değişiklik anında gerçekleşen işlemleri ve doğrulamayı kolaylaştırır.
Reactive Forms, HTML şablonlarında doğrudan veri bağlamayı gerektirmez. Bunun yerine, FormControl, FormGroup ve FormArray nesneleri kullanarak formlarınızı oluşturmanızı sağlar. Bu nesneler form kontrollerinin tutulduğu veri yapılarıdır ve Reactive Forms mekanizmasıyla birlikte kullanılarak form verilerinin yönetilmesini sağlar.
İşte Template Driven Forms ve Reactive Forms arasındaki bazı temel farklılıklar:
1. Mimari: Template Driven Forms, template’ler içinde ngModel direktifleri kullanılarak oluşturulurken, Reactive Forms programatik olarak FormControl, FormGroup ve FormArray sınıfları kullanılarak oluşturulur.
2. Veri Modeli: Template Driven Forms, model verileri ile template’ler arasında bağlantı oluştururken, Reactive Forms veri modelini oluşturmak için daha esnek bir yaklaşım sunar.
3. Test Edilebilirlik: Reactive Forms, programatik olarak oluşturulduğu için, test edilebilirliği daha yüksek bir yaklaşım sunar. Template Driven Forms’un test edilebilirliği daha zayıf olabilir.
4. Validation: Reactive Forms, form doğrulama işlemlerini programatik olarak yaparken, Template Driven Forms, ngModel direktifleri kullanılarak doğrulama işlemleri gerçekleştirilir.
5. Form Karmaşıklığı: Reactive Forms, karmaşık formlar için daha uygundur ve daha yüksek bir esneklik sağlar. Template Driven Forms ise, daha basit form senaryoları için daha kolay bir kullanım sağlayabilir.
6. Performans: Reactive Forms, daha hızlı performans sunar. Template Driven Forms’un performansı, sayfadaki formların karmaşıklığına bağlı olarak değişebilir.
Bu nedenlerden dolayı, büyük, karmaşık formlar için Reactive Forms daha uygun bir seçenek olabilirken, daha basit formlar için Template Driven Forms daha kolay bir kullanım sunabilir.
Reactive Forms, form kontrolleri için TypeScript sınıfları kullanarak, formdaki girdilerin değerlerini takip etmek ve doğrulamak için kullanılır. Reactive Programming, olay temelli sistemlerin geliştirilmesine yönelik bir programlama yaklaşımıdır.
Reactive Programming prensipleri şunları içerir:
1. Verilerin Değişkenliği: Reactive Programming, verilerin sürekli olarak değişebileceğini varsayar. Bu nedenle, verileri belirli bir zamanda değiştiren olaylar yakalanır ve işlenir.
2. Yayın İşlemi: Reactive Programming, olayların yayılması ve işlenmesi için bir yayın işlemi kullanır. Yayın işlemi, olayların akışını kontrol eder ve olayların işlenmesi için gereken verileri sağlar.
3. Veri Akışı İşleme: Reactive Programming, veri akışını işlemek için bir dizi işlem kullanır. Bu işlemler, verileri filtreleyebilir, dönüştürebilir, birleştirebilir veya ayrıştırabilir.
4. Sorgu İşlemi: Reactive Programming, verilerin sorgulanması için bir dizi işlem kullanır. Bu verilerin farklı şekillerde sorgulanmasına olanak tanır ve sonuçları akış halinde verir.
5. Geri Bildirim Kontrolü: Reactive Programming, geri bildirim kontrolü için bir mekanizma sağlar. Geri bildirim kontrolü, kullanıcının etkileşimlerinin sistem üzerindeki yansımasını kontrol etmek için kullanılır.
Bu prensipler, Reactive Programming’in temel yapı taşlarıdır ve Reactive Programming kullanarak olay temelli sistemlerin geliştirilmesine yardımcı olur.
FormBuilder ve FormArray
FormBuilder sınıfı, form kontrolörlerinin tanımlanmasını ve doğrulanmasını kolaylaştırır. FormBuilder ve FormArray, Angular framework’ünün form işleme özellikleri için sağladığı iki farklı sınıftır.
FormBuilder, Angular'da dinamik bir şekilde form oluşturmaya yardımcı olan bir sınıftır. FormBuilder sınıfı, özellikle büyük ve karmaşık formların oluşturulması için kullanışlıdır ve form oluşturma sürecini daha kolay hale getirir.
FormArray, bir FormGroup içinde yer alan bir dizi FormControl öğesi için bir yönetim sınıfıdır. FormArray, dinamik olarak oluşturulan ve kontrol edilen formlar için kullanışlıdır. Örneğin, bir formda birden fazla aynı türdeki alanın olduğu durumlarda kullanılabilir. FormArray, birden fazla FormControl nesnesini tek bir dizi içinde gruplamak için kullanılabilir. Böylece, birden fazla aynı türdeki form alanı ile çalışırken, formları tek bir FormArray içinde yönetebilirsiniz.
Örnek İle İnceleyelim
Aşağıdaki örnek basit bir Reactive Form oluşturma örneğidir:
1. Öncelikle, Reactive Forms'u kullanmak için FormsModule ve ReactiveFormsModule'ı Angular projesinde yüklemelisiniz.
2. Daha sonra, örneğimizde kullanacağımız bir form kontrolünü oluşturmak için FormGroup ve FormControl sınıflarını içe aktarın:
import { FormGroup, FormControl } from '@angular/forms';3. Ardından, bir FormGroup nesnesi oluşturun ve içine FormControl nesneleri ekleyin. Bu örnekte, bir ad alanı ve bir e-posta alanı içeren bir form oluşturacağız:
export class MyComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
}
}4. Şimdi HTML şablonumuzu oluşturabiliriz. Form kontrolüne veri bağlama yapmak için, FormControl’un değer özelliğini kullanacağız:
<form [formGroup]="myForm">
<label>
Name:
<input type="text" formControlName="name">
</label>
<label>
Email:
<input type="email" formControlName="email">
</label>
</form>5. Son olarak, formun gönderilmesini ve form verilerinin doğrulanmasını işleyen bir yöntem ekleyebiliriz. Aşağıdaki örnek, formun gönderilmesi durumunda sadece konsola form verilerini yazdırır:
export class MyComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
}
onSubmit() {
console.log(this.myForm.value);
}
}Evet görmüş olduğunuz üzere, Reactive Forms kullanarak basit bir formun nasıl oluşturulacağını gösterildi. Reactive Forms, form kontrolü için daha fazla özellik sunar ve özellikle büyük, karmaşık formlar için idealdir.
Yukarıda ki örneğimizi FormBuilder ile yapalım…
- FormBuilder’ı içe aktarın:
import { FormBuilder } from '@angular/forms';2. FormBuilder’ı bileşeninizin yapıcı fonksiyonunda enjekte edin:
constructor(private fb: FormBuilder) { }3. FormGroup ve FormControl nesnelerini FormBuilder ile oluşturun. Aşağıdaki örnekte, bir ad alanı ve bir e-posta alanı içeren bir form oluşturacağız:
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: '',
email: ''
});
}
}4. HTML şablonumuzu oluşturabiliriz. Form kontrolüne veri bağlama yapmak için, FormControl’un değer özelliğini kullanacağız:
<form [formGroup]="myForm">
<label>
Name:
<input type="text" formControlName="name">
</label>
<label>
Email:
<input type="email" formControlName="email">
</label>
</form>5. Son olarak, formun gönderilmesini ve form verilerinin doğrulanmasını işleyen bir yöntem ekleyebilirsiniz. Aşağıdaki örnek, formun gönderilmesi durumunda sadece konsola form verilerini yazdırır:
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: '',
email: ''
});
}
onSubmit() {
console.log(this.myForm.value);
}
}Evet görmüş olduğunuz üzere, Reactive Forms örneğimize FormBuilder ekleyerek basit bir formun nasıl oluşturulacağını gösterdim. FormBuilder, form oluşturma sürecini daha hızlı ve kolay hale getirir.
ÖZET
Özetlemek gerekirse, ne demiştik Angular’da 2 farklı tip form oluşturmamız var bunlar Reactive Forms ve Template Driven Forms. ReactiveForms’lar FormControl, FormGroup ve FormArray sınıflarını, Template Driven Forms ise ngModel direktifleri kullanır. Dinamik Form yapısı için tercih edilen Reactive Forms, daha basit form yapıları için Template Driven Forms.
FormBuilder, formdaki FormArray öğelerini de kolayca oluşturur. FormArray, formun parçası olarak birden fazla FormControl, FormGroup veya başka bir FormArray içerebilen form kontrolüdür. FormBuilder ile FormArray oluşturmak kolaydır ve dinamik formlar için oldukça yararlıdır.
Elimden geldiğince anlaşılır olmaya çalıştım yazımı okuduğunuz ve incelediğiniz için teşekkürler.
Tekrardan görüşmek üzere.
