Angular: Gücümü Reactive Forms’a Borçluyum.
Reactive Forms; bir form üzerinde yapılan tüm değişiklikleri takip edip yönetmemizi sağlayan “Model Tabanlı” bir yaklaşımdır.
Reactive Forms; Form içindeki tüm kontrollerde (input, text-area, combobox vb) yapılan tüm etkileşimleri dinler, yapılan değişiklikleri kontrol eder ve değişiklikleri formun durumuna(state) iletir. Form içinde bulunan kontrolleri(zorunluluk, uzunluk vb) yapar; data-model ile doğrudan erişimi olduğundan, yapılan değişiklikler de anında data-modele yansıtır.
İçindekiler:
* Proje ve İlgili Componentlerin Oluşturulması
* FormControl, FormGroup, FormArray, FormBuilder Nedir, Ne İşe Yarar
* Örnekler
* Proje Kodları (Github Repository)
* KaynaklarHazırlıklar:
Proje Angular 7 ve Bootstrap 4 ile hazırlandı ama aşağıdaki kodlar Angular +2 üzeri tüm versiyonlarda çalışacaktır. Projemizi oluşturmak ve örneklerde kullanacağımız componentleri yaratmak için aşağıdaki işlemleri yapıyoruz.
Yukarıdaki işlemleri yaptıktan sonra proje yapımız şu şekilde olacak.
Model dosyalarının içerikleri şu şekilde olacak
Reactive Forms’u kullanabilmek için ReactiveFormsModule NgModules dosyasındaki imports dizisine eklenmeli. Aşağıdaki kod blogunda On dördüncü satırda gerekli eklemeyi yapıyoruz. ReactiveFormsModule @angular/forms paketinden proje import edilir (Birinci satır).
Nedir Bu “FormControl, FormGroup, FormArray, FormBuilder”?
FormControl, FormGroup, FormArray; Angular’da form(lar) tanımlamak için kullanılan üç temel yapı taşlarıdır.
FormControl: Sayfada bulunan ilgili kontrolün(input, calender, checkbox vb); durumuna(valid, invalid), o anki değerine, varsa doğrulama(validations) işlemlerine ve kullanıcın kontrol üzerinde yapmış olduğu eylemlere ulaşmamızı sağlayan mekanizmadır. Reactive Forms’un en küçük yapı taşıdır.
FormGroup: FormControl’lerden oluşan kümedir. İçinde bulunan tüm kontrolleri; key (kontrolün adı) — value olarak bir arada tutar. Her bir kontrolün durumunu ayrı ayrı takip eder. Örneğin FormGroup’ta bulunan kontrollerden birinin durumu hatalı(kullanıcı hatalı email adresi girmiş olabilir.) ise; FormGroup’un durumu da hatalı olarak ayarlanacaktır.
FromArray: İçinde FormControl ve/veya FormGroupları barındıran dizilerdir. Dizide bulunan tüm kontrollerde meydana gelen değişiklikleri takip eder. Eğer kontrollerden birinin durumu hatalı ise FormArray’in durumu da hatalı olacaktır.
FormBuilder: Kullanıcıların daha basit bir şekilde kompleks form(lar) oluşturmasını sağlayan servistir. “FromControl, FormGroup ve FormArray” lerini kısa yoldan oluşturulmasını sağlar.
Yukarıda açıklamasını yapmaya çalıştığım kavramların kullanımı ile ilgili örneklere geçelim.
Örnek-1: FormControl’ün kullanımı ile ilgili örnek. “basic-component .ts” ve “basic.component.html” dosyalarını açıp aşağıdaki işlemleri yapıyoruz.
Yukarıdaki kod bloğunda ikinci satırda “adSoyad” değişkeni ile FormControl yaratıyoruz. Kullanıcı ekranda bulunan “Varsayılan İsmi Yazı” butonuna bastıktan sonra “onSubmit()” metodu kontrole varsayılan değer yazmasını sağlar. FormControl’de bulunan reset methodu ile ilgili kontrol başlangıç durumuna getirilir.
Yaratılan kontrolün ekranda görüntülenmesi ve yapılan işlemlerin takip edilmesi için basic.component.html dosyasındaki input kontrolüne [formControl]=”adSoyad” yazıyoruz(yedinci satır). Ekranda kullanıcının girmiş olduğu değeri göstermek için on ikinci satıra {{adSoyad.Value}} ekliyoruz.
Bu işlemler tamamlandıktan sonra ng serve ile projeyi çalıştırıyoruz.
Örnek-2: FormGroup kullanımı ile ilgili örnek. “group.component.ts” ve “group.component.html” dosyalarını açıp aşağıdaki işlemleri yapıyoruz.
Yukarıdaki kod bloğunda; ikinci satırda “kisiForm” değişkeni ile FromGroup yaratıyoruz ve FormGroup içine de ekranda görüntülenecek kontrolleri ekliyoruz. Bu işlemin sonunda FromGroup’un içinde bulunan tüm kontroller için aynı özelliklere (value, untouched vb)ve metodlara (setValue(), reset() vb) olacak şekilde instance’ları yaratılır. Dokuzuncu satırda KisiBilgisi modelinden kisi değişkeni tanımlıyoruz. Burada dikkat edilecek nokta modelde bulunan değişkenler ile FormGroup’ta bulunan FormController aynı isimde olmalı. Aksi durumda formda yapılan değişiklikler data-modele istenilen şekilde aktarılmayacaktır. On ikinci satırda formda yapılan değişiklikleri “kisi” değişkenine atıyoruz.
Üçüncü satırda form tag’ine [formGroup]=”kisiForm” yazarak form tag’ini grupluyoruz. Kaydet butonuna bastıktan sonra kayıt işlemlerinin yapılabilmesi için form tag’ine (ngSubmit)=”onSubmit()” yazıyoruz. Formda bulunan kontrollere formControlName özelliğine FormGroup’taki kontrolün adını yazarak FromGroup ile formdaki kontrolleri ilişkilendiriyoruz. Örneğin Sekizinci satırda bulunan Adı soyadı kontrolü ile FormGroup’taki adi kontrolünü formControlName=”adi” yazarak ilişkilendiriyoruz. Diğer kontroller içinde benzer işlemleri yapıyoruz. Kullanıcı kaydet butona bastıktan sonra girilen değerlerin ekranda görüntülenmesi için <p><b>{{kisi|json}}</b></p> (Otuz ikinci satır) yazıyoruz.
Bu işlemler tamamlandıktan sonra ng serve ile projeyi çalıştırıyoruz.
Örnek-3: İç içe FormGroup kullanımı ile ilgili örnek. “nested-group.component.ts” ve “nested-group.component.html” dosyalarını açıp aşağıdaki işlemleri yapıyoruz.
Yukarıdaki kod bloğunun ikinci satırında “kisiForm” değişkeni ile kontrolleri olacak şekilde bir FromGroup yaratıyoruz. Beşinci satırda “iletisim” adında FormGroup ve içinde bulunacak kontrolleri tanımlıyoruz. On ikinci satırda “Kisi” modelinden kisi nesnesi oluşturuyoruz. ve on beşinci satırda kisiFormdan gelen bilgileri bu nesnenin içinde tutuyoruz. On beş ve on altıncı satırda formdan gelen değerleri Kisi ve Iletisim modeline dönüştürüyoruz. On dokuzuncu satırda bulunan iletisiBilgileri metodu formda sadece “adı” ve “telefon” bilgisine varsayılan değer atıyor.
Üçüncü satırda form tag’ine [formGroup]=”kisiForm” yazarak form tag’ini grupluyoruz. Yirmi ikinci satırda div tagına formGroupName=”iletisim” yazarak “kisiForm” FormGroup’un içinde bulunan “iletisim” FormGroup’una ulaşıyoruz. “kisiForm” ‘da bulunan tüm kontrolleri html dosyasında ilişkilendirdikten sonra ng serve ile proje çalıştırıyoruz.
Örnek-4: FormBuilder, FormArray ve Validasyon işlemleri ile ilgili örnek: “builder.component.ts” ve “builder.component.html” dosyalarını açıp aşağıdaki işlemleri yapıyoruz.
On yedinci Satırda “FormBuilder” servisini inject ediyoruz. İkinci satırda “kisiForm”unu bu servisi kullanarak oluşturuyoruz. Onuncu satırda forma “hobiler” adında bir FormArray’i ekliyoruz. Yirmi sekizinci satırda kullanıcının “hobiler” FormArray’ine yeni eleman ekleyebilmesini sağlıyoruz. On dokuzuncu satırda “kisiForm”un içinde bulunan “hobiler” FormArray’ine kullanıcının erişmesini sağlıyoruz. Bir önceki örnekte yaratılan form ile bu örnekte yaratılan formun kodlarına bakılırsa “FormsBuilder” ile form yaratma işleminin kolay olduğu görülebilir.
Validasyon işlemleri: Üçüncü satırda “adi” kontrolünü zorunlu olması ve en az 5 uzunlukta girilmesi şeklinde kontroller (validasyons) ekliyoruz. Kullanıcı bu bilgileri istenildiği şekilde girmediği sürece “Kaydet” butonu aktif olmayacak.
Otuz altıncı satırda formda bulunan “hobiler” dizisine ulaşıyoruz. Otuz yedinci satırda bu dizinin içindeki kontrolleri “*ngFor” ile oluşturup; dizideki değişkenler ile ilişkilendiriyoruz. Daha sonra ng serve ile proje çalıştırıyoruz.
Örnek-5: FormBuilder ve FormArray kullanımı ile ilgili örnek. Bir önceki örnekte FormArray’de tek kontrol vardı ve eklenen kontrolün çıktısı: {“0”:”değer”} şeklinde idi. FormArray’e herhangi bir model eklenerek, çıktı istenilen şekilde elde edilebilir. “formarray.component.ts” ve “formarray.component.html” dosyalarını açıp aşağıdaki işlemleri yapıyoruz.
Beşinci satırda FormBuilder servisini inject edip, yedinci satırda “kisiForm”unu yaratıyoruz. Bu formun içine “email” ve “telefon” adında iki tane FormControl’ü olan “iletisimBilgileri” FormArray’ini ekliyoruz. On üçüncü satırda; uygulama açıldığında bu alanların dolu gelmesi için, diziye değer atıyoruz.
Daha sonra ng serve ile proje çalıştırıyoruz.
Bir sonraki yazımda Dinamik bir şekilde Reactive Forms oluşturmayı anlatacağım. O zaman kadar Formda kalın ve Güçlü olun.
