Angular 4 – Forms Validations

Merhaba,

Bir önceki Angular 4 Forms Uygulamaları başlıklı makalemde Angular’da şablon odaklı ve model odaklı olmak üzere iki farklı form yapısını incelemiş bulunmaktayız. Bu içeriğimizde ise form doğrulama işlemleri olan Forms Validations yöntemlerini inceleyeceğiz. Lakin ilgili içeriğimizde sadece model odaklı form yapısını göz önünde bulunduracağız.

Hiç vakit kaybetmeden başlayalım…

Model odaklı form yapılarında doğrulama/validations işlemi için “@angular/forms” dizinindeki “Validators” sınıfının ilgili component sınıfına import edilmesi gerekmektedir.

import { FormGroup, FormControl, Validators } from '@angular/forms';

Şimdi örnek bir form taslağı oluşturalım ve gerekli Validations işlemlerinin nasıl yapılacağını üzerinden izah etmeye çalışalı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 [disabled]="!frmIletisim.valid">Gönder</button>
</form>

Formda dikkat etmeniz gereken tek husus “button” nesnesine tanımlanan “[disabled]” özelliğidir. Birazdan component sınıfında yapacağımız validations işlemlerine nazaran form üzerinde geçersiz bir doğrulama söz konusu olursa ilgili buton taa ki form doğrulanana kadar pasifize edilecektir.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } 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("", Validators.compose([
        Validators.required
      ])),
      email: new FormControl("", Validators.compose([
        Validators.required,
        Validators.pattern("[^ @]*@[^ @]*") //Mail adresi olduğunu doğrulayabilmek için.
      ])),
      meslek: new FormControl("", Validators.compose([
        Validators.required
      ])),
      mesaj: new FormControl("", Validators.compose([
        Validators.required
      ]))
    });
  }
  frmIletisim;
  adi;
  email;
  meslek;
  mesaj;
  OnClickForm(data) {
    alert("Adı : " + data.adi + "\nE-Posta : " + data.email + "\nMeslek : " + data.meslek + "\nMesaj : " + data.mesaj);
  }
}

Component sınıfımızda da görüldüğü üzere FormControl nesnelerinin constructerlarının ikinci parametrelerinde Validators.compose komutuyla ilgili alana istenilen doğrulama ayarlaması gerçekleştirilmektedir. Dolayısıyla model tabanlı validasyon işlemi bu şekilde sağlanmaktadır.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…