Angular’da “Template-driven Forms” Yaklaşımı Nedir?

Template-driven Forms

Angular’da formlar, iki ana yaklaşım kullanılarak yönetilir demiştik bunlar: Reactive Forms ve Template-driven Forms. Her iki yaklaşım da form kontrollerini ve doğrulamalarını yönetmek için farklı yollar sunar. Bugün bu makalenin konusuTemplate-driren Forms yaklaşımıdır. Reactive Forms yaklaşımını merak ediyorsanız bir önceki yazıya buradan erişebilirsiniz.

Template-driven Forms Yaklaşımı İle Form İşlemleri

Template-driven Forms, Angular’ın iki yönlü veri bağlama (two-way data binding) özelliğini kullanır ve daha basit uygulamalar için uygundur. Template-driven Forms yaklaşımını kullanmak için öncelikle, FormsModule'ü uygulamanın root modülüne eklenmesi gerekir. Template-driven Forms yaklaşımı ile form oluşturmadan önce bilinmesi gereken “FormsModule”, “Model” ve “ngModel” gibi yapılar vardır. Bunlara tek tek göz atalım.

FormsModule Nedir?

Angular’ın Template-driven Forms yapısını kullanmak için ihtiyaç duyulan modüldür. Bu modülü, uygulamanın AppModule’e import edilerek kullanılır. FormsModule, Template-driven Forms yapısını desteklemek için gerekli olan directive’leri ve servisleri içerir.

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

@NgModule({
  imports: [FormsModule],
  // ...
})
export class AppModule {}

Model Nedir?

Model, Angular Template-driven Forms yapısında form alanlarının Component sınıfı tarafındaki alanları bağlamak için kullanılan bir terimdir. Model, form alanlarının değerini temsil eder ve genellikle HTML etiketlerine [(ngModel)] ile bağlanır.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  model = { // user model
    name: '',
    email: '',
    message: ''
  };
  onSubmit(form) {
    if (form.valid) {
      console.log('Form Submitted!', this.model);
    }
  }
}

ngModel Nedir?

ngModel, input, select ve textarea gibi HTML form elemanlarının değerlerini Angular Component sınıfındaki Model’e bağlayan bir directive’dir.

<input [(ngModel)]="user.name" name="name">

ngForm Nedir?

Bir formu temsil eden ve Angular’ın form elemanlarını yöneten bir directive’dir. ngForm, form elemanlarının doğrulama durumu ve değerleri gibi bilgileri içeren bir form nesnesi oluşturur. Template-driven Forms kullanırken, Angular bir form elemanını otomatik olarak ngForm ile ilişkilendirir.

<form #userForm="ngForm">
  <!-- Form elemanları burada -->
</form>

Template-driven Forms yaklaşımı, Angular’da form yönetimini HTML şablonlarında gerçekleştirmenizi sağlar.

Örnek:

Şimdi bütün bu Model ve directive’leri bir form örneğinde kullarak konuyu pekiştirelim. Öncelikle formda 3 tane alan olacaktır: name, email ve message diye. Bütün alanlar zorunlu olacaklardır. Formda bir tane button olacaktır. Component sınıfında formun submit olayını yaklayacak bir tane onSubmit() metodu olacaktır.

1. Template-driven Forms yaklaşımını kullanmak için FormsModule uygulamanın AppModule gibi root modülüne eklenir.
2. Component sınıfı içerisinde “name”, “email ”ve “message ” alanlarını kapsayan bir Model objesi eklenir.
3. Model içerisindeki alanların ilk değerleri boş string olarak verilir.
4. Son olarak myForm’un submit olayında onSubmit() metodunda myForm’un Valid olup olmadığı kontrol ediliyor.

// app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // diğer importlar
    FormsModule
  ],
  // diğer ayarlar
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  model = {
    name: '',
    email: '',
    message: ''
  };
  onSubmit(form) {
    if (form.valid) {
      console.log('Form Submitted!', this.model);
    }
  }
}

Sınıf tarafındaki tanımlamalarımız bu kadardır. Şimdi template tarafında yapılan işlemlere bakalım.

1. ngForm directive ile HTML form etiketinin referansı myFom adındaki template-reference’a bağlanır.
2. Formun içerisindeki submit olayı da, (ngSubmit)=”onSubmit()” event binding ile sınıfın içerisindeki metoda bağlanmıştır.
3. ngModel directive ile form içerisindeki HTML form elemanları sınıf içerisindeki modele bağlanmıştır.
4. Form elemanlarının validasyon işlemleri için kurallar directive’ler ile verilmiştir. Örnek: disable veya email gibi.
5. Sonra `myForm.submitted && !myForm.controls.name?.valid` ile anlık olarak form elemanlarının durumu kontrol edilerek validasyon mesajları yazılmıştır.
6. Son adımda, type=”submit” olan bir tane button var.

<!-- app.component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label for="name">Name:</label>
  <input id="name" name="name" [(ngModel)]="model.name" required>
  <div *ngIf="myForm.submitted && !myForm.controls.name?.valid">
    Name is required
  </div>
<label for="email">Email:</label>
  <input id="email" name="email" [(ngModel)]="model.email" required email>
  <div *ngIf="myForm.submitted && !myForm.controls.email?.valid">
    Valid email is required
  </div>
  <label for="message">Message:</label>
  <textarea id="message" name="message" [(ngModel)]="model.message" required></textarea>
  <div *ngIf="myForm.submitted && !myForm.controls.message?.valid">
    Message is required
  </div>
  <button type="submit">Submit</button>
</form>

Yukarıdaki örnek baştan sona kadar bir formun Template-driven Forms yaklaşımı ile nasıl yapıldığını gösteriyor. Başlangıçta Reactive Forms yaklaşımına nazaran daha kolay görülüyor. Fakat daha ileri düzey kontrol ve validasyon işlemleri gerektiğinde bir directive karmaşası oluşacaktır. Basit formlar için kullanılabilir.

Template-driven Forms yaklaşımı, Angular’da form yönetimini kolay ve basit hale getirir. HTML şablonlar üzerinden form kontrollerini tanımlamak ve bağlamak, geliştiricilerin hızlı bir şekilde kullanıcı dostu formlar oluşturmasına olanak tanır. Bu yaklaşım, özellikle küçük ve orta ölçekli formlar için idealdir, çünkü basit bir yapı sunar ve Angular’ın güçlü data-binding özelliklerini kullanarak form yönetimini otomatikleştirir.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular