Angular Reactive Formları


angularAngular 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.

 

Yazılım Kalite Güvencesi


Kalite Güvence, yazılım yordamlarının ve ürünlerinin “gereksinimlere, standartlara” uygunluğunu belirleyen planlı ve sistematik çalışmalardır.

Yazılım Kalite Güvence Yapısı

  1. Bakım: Sorun çıktığında düzeltilebilir mi?
  2. Esneklik: Değiştirebilir miyim?
  3. Test Edilebilirlik: Test edebilir miyim?
  4. Doğruluk: İstediğim işi yapıyor mu?
  5. Güvenilirlik: Her zaman doğru mu çalışıyor?
  6. Verimlilik: Donanımda en iyi şekilde mi çalışıyor?
  7. Kullanılabilirlik: Yazılım kullanıcı için mi tasarlandı?
  8. Taşınabilirlik: Başka bir bilgisayarda kullanabilir miyim?
  9. Yeniden kullanılabilirlik: Aynı yazılımı tekrar kullanabilir miyim?
  10. Birlikte-işlerlik: Başka sistemle birlikte kullanabilir miyim?

Yazılım Kalite Güvencesi Kuruluşları ve Sertifikalar

SEI – Yazılım Mühendisliği Enstitüsü (Software Engineering Institute) web sitesi; SEI teknik programlar ile ilgili bilgiler, yayımlar, bibliyografyalar, çevirim-içi belgeler, SEI kursları, eğitim, diğer sitelere linkler.

IEEE Standardları – IEEE web sitesi; Yazılım mühendisliği standardları, yazılım kalite güvence standardları

American Society for Quality – Amerika Kalite Topluluğu (American Society for Quality) web sitesi; kalite ile ilgili yazılar. Dünyanın bu konudaki en büyük organizasyonu. 100.000’den fazla üyesi vardır. ASQ Yazılım Bölümü (Software Division) web sitesi ise yazılım ile ilgili kalite güvence bölümüdür.

Yazılım Kalitesi Topluluğu (Society for Software Quality)

QAI – Kalite Güvence Enstitüsü (Quality Assurance Institute)

CSQE – ASQ Amerika Kalite Topluluğu   (American Society for Quality) CSQE Sertifikalı Yazılım Kalite Mühendisi (Certified Software Quality Engineer) programı – Gereksinimler ile ilgili bilgiler var.

CSQA/CSTE – QAI   Kalite Güvence Enstitüsü’nün (Quality Assurance Institute)   CSQA Sertifikalı Yazılım Kalite Analisti (Certified Software Quality Analyst) programı ve CSTE Sertifikalı Yazılım Test Mühendisi (Certified Software Test Engineer) sertifikası.

ISEB Yazılım Test Sertifikaları (Software Testing Certifications) – İngiliz Bilgisayar Topluluğu (The British Computer Society) 3 seviyeli sertifika sistemi: – ISEB Kuruluş Sertifikası (Foundation Certificate), Pratisyen Sertifikası (Practitioner Certificate), ve Pratisyen Diploması (Practitioner Diploma).

Kaynak: http://www.csharpnedir.com/articles/read/?id=201