Angular 4 Forms Uygulamaları

Merhaba,

Bu içeriğimizde Angular 4 uygulamalarında formlarla çalışmanın iki farklı yolu olan “Şablon Odaklı Form” ve “Model Odaklı Form” yapılarını inceleyeceğiz.

Genel Gereksinimler

Form yapılarında çalışabilmek için belirli modülleri uygulamamızın “app.module.ts” isimli ana modül dosyasına import etmemiz gerekmektedir. Bizler yukarıda Şablon Odaklı Form ve Model Odaklı Form olmak üzere iki farklı yapı üzerinden konuyu değerlendireceğimizi belirtmiştik. Dolayısıyla bu iki yapıya özel modüllerimiz olacaktır.

Şablon odaklı form yapıları için;

import { FormsModule } from '@angular/forms';

Model odaklı form yapıları için ise;

import { ReactiveFormsModule } from '@angular/forms';

modüllerini kullanmamız yeterli olacaktır.

Ben her iki durumuda karşılaması için örneğimizde iki modülüde import ediyorum.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ContactFormComponent } from './contact-form/contact-form.component';
@NgModule({
  declarations: [
    AppComponent,
    ContactFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Şimdi ilk olarak şablon odaklı formları ele alarak başlayalım.

Şablon Odaklı Formlar

Şablon odaklı formlarda çalışmaların büyük çoğunluğu şablon üzerinde gerçekleştirilmektedir. Bunun için basit bir iletişim formu örneklendirmede oldukça yeterli olacaktır.

<form #frmIletisim="ngForm" (ngSubmit)="OnClickForm(frmIletisim.value)">
  <input type="text" name="adi" placeholder="Adınız..." ngModel />
  <br>
  <input type="email" name="email" placeholder="E-Posta Adresiniz..." ngModel />
  <br>
  <select name="meslek" ngModel>
    <option value="0">Öğretmen</option>
    <option value="1">Yazılım Müh.</option>
    <option value="2">Doktor</option>
    <option value="3">Diğer</option>
  </select>
  <br>
  <textarea name="mesaj" placeholder="Mesajınız..." rows="7" ngModel></textarea>
  <br>
  <button>Gönder</button>
</form>

Yukarıdaki kod bloğunu incelerseniz eğer bir <form…> </form> etiketinin açıldığını ve belirli attributelar ile çalışmalar yapıldığını göreceksiniz. Burada, form nesnesine #frmIletisim etiketi verilerek bir isim atanmıştır. Bu isme karşılık ngForm değeri verilerek bunun bir Angular form uygulaması olduğu bildirilmiştir. Ayrıca ngSubmit olayına OnClickForm fonksiyonu tanımlanmıştır ve bu fonksiyona parametre olarak frmIletisim.value değeri gönderilmiştir. Bu değer form içerisindeki elemanların kullanıcı tarafından girilen tüm değerleri yakalayacak ve ilgili fonksiyona post edecektir.

Angular Form uygulamalarında dikkat etmeniz gereken bir diğer husus ise post esnasında form içerisindeki elemanlardan hangilerini model olarak hesaba katacağını belirlemektir. Bu işlem içinde ngModel özelliği kullanılmaktadır. Yani form içerisindeki elemanlara erişebilmek istiyorsanız eğer bu özellik ile işaretlediğinize dikkat etmeniz gerekmektedir.

Formu tetiklediğimizde programatik olarak nasıl çalışacağımızı görebilmek için dilerseniz hiç vakit kaybetmeden arkaplandaki kodlarımıza da göz atalım…

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  OnClickForm(data) {
    alert("Adı : " + data.adi + "\nE-Posta : " + data.email + "\nMeslek : " + data.meslek + "\nMesaj : " + data.mesaj);
  }
}

Burada tanımlamamız gereken tek yapı, formun değerlerini gönderdiğimiz OnClickForm isimli fonksiyondur. Form post edildiği anda ilgili fonksiyon çalışacak ve “data” parametresine formun değerlerini getirecektir. Dolayısıyla bizler form elemanlarının değerlerine “name” özelliklerinden erişebilmekteyiz.

Burada uygulamamızı kaydedip, yayınlarsak eğer aşağıdaki görselde olduğu gibi işlevsellikle karşılaşacağız.

Angular 4 Forms Uygulamaları

Model Odaklı Formlar

Model odaklı formlarda çalışmaların çoğunu component sınıfı içerisinde gerçekleştireceğiz.

İlk olarak formumuzu ayarlayalım.

<form [formGroup]="frmIletisim" (ngSubmit)="OnClickForm(frmIletisim.value)">
  <input type="text" placeholder="Adınız..." formControlName="adi" />
  <br>
  <input type="email" placeholder="E-Posta Adresiniz..." formControlName="email" />
  <br>
  <select formControlName="meslek">
    <option value="0">Öğretmen</option>
    <option value="1">Yazılım Müh.</option>
    <option value="2">Doktor</option>
    <option value="3">Diğer</option>
  </select>
  <br>
  <textarea placeholder="Mesajınız..." rows="7" formControlName="mesaj"></textarea>
  <br>
  <button>Gönder</button>
</form>

Burada dikkat ederseniz formu isimlendirirken [formGroup] özelliği kullanılmaktadır. Ayrıca hangi elemanların form işlemine tabii tutulacağını formControlName özelliği ile belirtiyoruz. Bu özelliğe verilen isim birazdan component sınıfından ilgili nesnenin değerini elde edeceğimiz isim olacaktır.

Arkaplanda component sınıfımızı incelersek eğer;

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    this.frmIletisim = new FormGroup({
      adi: new FormControl(),
      email: new FormControl(),
      meslek: new FormControl(),
      mesaj: new FormControl()
    });
  }
  frmIletisim;
  adi;
  email;
  meslek;
  mesaj;
  OnClickForm(data) {
    alert("Adı : " + data.adi + "\nE-Posta : " + data.email + "\nMeslek : " + data.meslek + "\nMesaj : " + data.mesaj);
  }
}

görüldüğü üzere tüm mesele burada ceyran etmektedir.

İlk olarak “@angular/forms” dizininden FormGroup ve FormControl modüllerini ilgili sınıfa import ediyoruz. Burada viewde forma formGroup ile vermiş olduğumuz isimde bir değişken tanımlıyoruz(frmIletisim). Ardından form içerisindeki tüm elemanları karşılayacak ve o elemanların formControlName özelliğine verilmiş isimle birebir olacak şekilde isimlendirilecek değişkenler tanımlıyoruz(adi, email, meslek, mesaj).

Burada mantık olarak; sayfa ilk tetiklendiğinde ngOnInit fonksiyonu içerisinde formumuza(frmIletisim) bir FormGroup nesnesi tanımlayarak, bu nesne ile ilgili form içerisindeki tüm elemanlara FormControl nesnesi aracılığıyla varsayılan değerlerini atayacağız ve uygulamayı bu şekilde başlatacağız. Burada FormControl nesnesinin constructer’ına verilecek olan değer ilgili form nesnesinin o değer ile yüklenmesine sebep olacaktır.

Velhasıl uygulamayı bu şekilde kaydedip, yayınladığımızda tekrardan problemsiz çalıştığını göreceksiniz.

Angular 4 Forms Uygulamaları

Bir sonraki yazımızda form güvenlik ve doğrulamasını sağladığımız Angular 4 Forms Validations üzerine değerlendirmede bulunuyor olacağız…

O halde sabırsızlıkla sonraki yazımda görüşmek üzere diyor hepinize esenlikler diliyorum…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

3 Cevaplar

  1. 03 Haziran 2018

    […] önceki Angular 4 Forms Uygulamaları başlıklı makalemde Angular’da şablon odaklı ve model odaklı olmak üzere iki farklı […]

  2. 29 Kasım 2018

    […] ilgili formdaki tüm alanları temsil eden modeller ile veri iletişimi söz konusudur. Konuya dair Angular 4 Form Uygulamaları başlıklı makalemizde daha detaylı bilgi […]

  3. 28 Şubat 2019

    […] bizler bu Reactive Forms yapılarına o kadar da yabancı değiliz. Önceki Angular Forms Uygulamaları başlıklı yazımda Angular uygulamalarında form yapılarına değinirken “Model Odaklı […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.