Angular’da Formlara Giriş

Kullanıcılardan istenilen verilerin formlar aracılığıyla alınması bir çok uygulamanın temel taşlarından biridir. Uygulamalar bir kullanıcının giriş yapmasını, bilgilerini güncellemesini vb. bütün veri giriş işlemlerini gerçekleştirmek için formları kullanır.

Angular kullanıcı girişlerini formlar aracılığıyla almak için iki farklı yaklaşım sunmaktadır. Bunlar template-driven ve reactive formlardır. Her ikisi de görünümden (view), kullanıcı giriş olaylarını (input events) yakalar, doğrular (validation), güncellenecek bir form modeli ve data modeli oluşturur ve değişiklikleri izlemek için bir yol sağlarlar.

Reactive ve template-driven formlar form verilerini farklı şekillerde işler ve yönetirler. Her birinin diğerinden farklı avantajları bulunmaktadır.

Genel olarak;

  • Reactive formlar daha sağlam, daha ölçeklenebilir, yeniden kullanılabilir ve test edilebilirdir. Formlar uygulamamızın kilit noktalarını oluşturuyor ve zaten reactive bir uygulama geliştiriyorsak reactive formları kullanmalıyız.
  • Template-driven formlar kullanıcı giriş formu gibi daha basit formlar için daha kullanışlıdır. Oluşturulmaları kolaydır. Fakat reactive formlar kadar iyi ölçeklendirilemezler. Template tarafında yönetilebilecek çok basit form gereksinimlerine ve mantığına ihtiyaçımız olduğu durumlarda template driven formları kullanabiliriz.

Bu yazıda durumumuza en uygun kullanım türünü seçebilmek adına bu iki form türünün ortak yönlerini, temel farklılıklarını, temel olarak nasıl tanımlandıklarını ve veri akışlarını anlamaya çalışacağız.

Template-driven ve reactive formların her ikisiyle ilgi ayrıntılı bilgi içeren incelemeleri daha sonra ki yazılarda ele alacağım.

Reactive ve Template-driven Formların Temel Farklılıkları

Aşağıda özet olarak template-driven ve reactive formların farklılıklarını görebiliriz:

temlate-driven formlar mutable (eklemeyi unutmuşum)

Reactive ve Template-driven Formların Ortak Noktaları

Template-driven ve reactive formlar temel yapı taşlarında ortaktırlar. Aşağıda bulunan özelliklere tıklayarak angular dökümanlarındaki api referanslarına ulaşabilirsiniz.

  • FormControl bir form elemanının değerini (value) ve doğruluğunu (validation) kontrol eder.
  • FormGroup form controllerinin tutulduğu ve kontrollerinin yapıldığı koleksiyon.
  • FormArray form controllerinin tutulduğu ve kontrollerinin yapıldığı dizi.
  • ControlValueAccessor FormControl örnekleri (instance) ile DOM elemanları arasında bir köprü oluşturur.

Reactive ve Template-driven Formların Temel Kullanımları

Reactive ve template-driven formlar input elementler ile angular formlar arasında ki değişiklikleri izlemek için ortak bir form model kullanır. Gelecek olan örnekler her ikisi içinde bu form modelin nasıl tanımlandığını gösterecektir. Angular dökümanında bulunan örnek üzerinden her iki formun tanımlanmasını ve veri akışlarını inceleyelim.

Reactive Formlar İçin Form Modelin Tanımlanması

Aşağıda reactive form ile oluşturulmuş tek elemanlı bir form örneği bulunmaktadır.

Reactive formlarda form öğesinin belirli bir zamanda değerini ve durumunu sağlayan form modelin kendisidir (the source of truth). Yukarıdaki örnekte form modeli FormControl örneğidir (instance).

Angular’ın dökümanlarında bulunan aşağıdaki resmi inceleyelim:

Reactive formlarda form modeli açık bir şekilde component sınıfında tanımlanır.

favoriteColor = new FormControl('Blue');

Reactive form directivi (FormControlDirective<input type="text" [formControl]="favoriteColor" /> ) mevcut FormControl örneğini (instance), value accessor (ControlValueAccessor instance) aracılığıyla görünümdeki (view) belirli bir form öğesine bağlar.

Template-driven Formlar İçin Form Modelin Tanımlanması

Reactive formda verdiğimiz örneğin aynısını template-driven form içinde yapalım.

Template-driven formlarda form öğesinin belirli bir zamanda değerini ve durumunu sağlayan (the source of truth) template‘tir.

Yine Angular’ın dökümanında bulunan aşağıdaki resmi inceleyelim:

Template-driven formlarda FormControl örneğini oluşturmak ve yönetmekten NgModel directivi sorumludur. Template-driven formlarda form modeli üzerinde doğrudan kontrolümüz yoktur.

Stackblitz üzerinden örnekleri inceleyebilirsiniz.

Reactive Formlarda Veri Akışı

Yine Angular dökümanında bulunan data-flow örneği üzerinden incelememizi yapalım.

Rective Form View To Model Veri Akışı

  1. Kullanıcı değeri Blue olan Favorite Color inputa bir değer yazar.
  2. Form input elementi (Favorite Color) en son değere sahip bir giriş olayı (input emit) yayar.
  3. Form input elementinin olaylarını dinleyen (events) conrol value accessor yeni değeri hemen FormControl örneğine (instance) iletir.
  4. FormControl örneği yeni değeri valueChanges gözlemlenebiliri (observable) aracılığıyla yayar.
  5. valuChanges’e gözleyici olan aboneler (subscribe) yeni değeri alır.

Reactive Form Model To View Veri Akışı

  1. Kullanıcı FormControl değerini güncelleyen favoriteColorControl.setValue("red") metodunu çağırır.
  2. FormControl örneği yeni değeri valueChanges gözlemlenebiliri (observable) aracılığıyla yayar.
  3. valuChanges’e gözleyici olan aboneler (subscribe) yeni değeri alır.
  4. Form input elmentindeki control value accessor, elementi yeni değer ile günceller.

Template-driven Form View To Model Veri Akışı

Burada ilk etapta favorite color red daha sonra blue değeri giriliyor. Resmi iyice inceleyip aşağıdaki adımları ondan sonra okursak daha iyi anlayabiliriz.

  1. Kullanıcı inputa Blue değerini girer.
  2. Input Blue değerinde bir giriş olayı (input event) yayar.
  3. Control value accessor formControl örneğinide bulunan setValue() metodunu tetikler.
  4. FormControl örneği yeni değeri valueChanges gözlemlenebiliri (observable) aracılığıyla yayar.
  5. valuChanges’e gözleyici olan aboneler (subscribe) yeni değeri alır.
  6. Ayrıca control value accessor ngModelChange eventini yayan NgModel.viewToModelUpdate() metodunu da çağırır.
  7. Çünkü template favoriteColor özelliği (property) ile iki yönlü veri bağlaması (two-way binding) kullanarak component ile bağlandığı için componentteki favoriteColor özelliği ngModelChange olayı tarafından yayılan (Blue) değere güncellenir.

Template-driven Form Model To View Veri Akışı

  1. favroiteColor değeri component tarafından güncellenir. this.favrotieColor = 'red'
  2. Change detection başlar.
  3. Change detection sırasında inputlardan birinin değeri değiştiği için ngOnChanges lifecycle hook ngModel directive örneği üzerinden çağırılır.
  4. ngOnChanges() metodu FormControl örneğinin değerini ayarlamak için asenkron bir task sıraya alır.
  5. Change detection tamamlanır.
  6. Bir sonraki onaylamada (tick()) FormControl örneğini ayarlama taskı yürütülür.
  7. FormControl örneği son değeri valuChanges observable’ı aracılığıyla yayar (emit).
  8. valuChanges’e gözleyici olan aboneler (subscribe) yeni değeri alır.
  9. Control value accessor favoriteColor özelliğinin son değeri ile görüntüdeki input elementinin değerini günceller.

Form Validation Nedir?

Validation, formları yönetirken kullanılması kaçınılmaz olan yöntemlerden birisidir. Bir form elemanının zorunlu olduğunu veya bir API üzerinden kullanılan kullanıcı isimlerini kontrol etmek gibi bir çok amaçla kullanılabiliriz. Angular kendi yerleşik validationlarına sahip olmakla beraber (Validation.required gibi) özel olarak kendi ihtiyaçlarımıza uygun validationlar tanımlamamıza da izin verir.

  • Reactive formlarda özel validationlar fonksiyonlar tanımlanarak yapılır
  • Template-driven formlarda ise directivler aracılığıyla custom validatiorler tanımlanabilir.

Validationlar daha sonra ki yazılarda ele alınacaklar.

Özet

  • Bu yazıda Angular dökümanı üzerinden formlar incelendi.
  • Reactive ve template-driven formlar temel farklılıkları ortaya kondu.
  • Her iki formun ortak olarak kullandığı sınıflara atıfta bulunuldu.
  • Her iki form türünün temel olarak nasıl tanımlandığı incelendi.
  • Veri akışları Angular dökümanında bulunan grafikler üzerinden incelendi.
  • Kısaca form validation konusuna değinildi.

Bir sonra ki yazıda reactive formlar ile iligili daha detaylı örnek ve incelemelerde bulunacağız.

Kaynaklar

https://angular.io/guide/forms-overview

Önceki yazılara aşağıdaki linklerden ulaşabilirsiniz:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade