Angular Validators
Volkan Önder
Last updated
Volkan Önder
Last updated
Merhabalar,
Bu yazım da Angular ile form yapılarını nasıl daha doğru ve etkin kullanabiliriz bunu inceleyeceğiz. Normal de input, switch, combobox vb. gibi kullanıcı girişi yapılan yerlerinin kontrolünü yapmak zordur. Özellikle de inputun sadece email ya da sadece telefon numarası girilebilir hale getirmek için özel pattern, regex ya da JQuery kullanmak gerekir. Angular da ise bunu ReactiveForms kütüphanesinin Validators sınıfını kullanarak çok basit bir şekilde gerçekleştirebiliriz. Şimdi bu sınıfı incelemeye başlayalım.
Öncelikle kullanmak istediğimiz inputları Form çatısı içerisini almak için HTML üzerinde önce inputlarımızı <form> etiketi altında toplamalıyız, ardından inputlara formControlName="port" benzeri etiket vermeliyiz ki Typescript kısmında bu inputları yönetelim. Ardından formu yönetmek için Typescript üzerinde import etmemiz gerekenler;
import { FormControl, FormGroup, Validators } from '@angular/forms';
Import’ları da eklediğimize göre artık önce HTML’ de ardından da Typescript üzerinde form yapısı oluşturup, birbirine bağlayıp, validasyonları da ekleyebiliriz.
Şeklinde bir görüntü oluşacaktır. Ardından Typescript üzerinde gerekli nesneleri oluşturalım.
Typescript kısmında görüldüğü gibi new FormGroup çatısı altında olacak şekilde her bir input new FormControl kullanılarak HTML ile bağlantısı yapılmıştır. İlk etapta new FormControl objesinin propertylerine bir bakalım. Ilk başta verilen property o inputun default değerini belirtmektedir. ServerName ve FromTo inputları için default string değer boş olacak şekilde belirlenirken, TlsSwitch için false, Port için ise 514 değeri default olarak belirlenmiştir. Ardından ikinci property ise arrayden oluşmakta. Bu array içerisine belirtilen input için vereceğimiz Validasyonları listeliyoruz.
Validasyonlar arasında en çok kullanılanı Validators.required çünkü kullanıcıya sunulan Inputların genelde zorunlu olmasını isteriz. Örneğin forum sitesine üye olurken kullanıcı adı, E-Posta gibi alanların boş olmaması gerekir.
Diğer validasyonları inceleyecek olursak;
Validators.min(1): Verilebilecek minimum integer değer.
Validators.min(65535): Verilebilecek maximum integer değer.
Validators.email: Girilecek olan string inputun E-Posta formatında olmasını doğrulamak için kullanılır.
Bunlar standart bir proje de en çok kullanılan validasyonlardır. Tüm validasyonları incelemek için Angular’ın web sitesini buradan (https://angular.io/api/forms/Validators) ziyaret edebilirsiniz.
Şu anda tüm validasyonlar typescript üzerinde gerçekleşmiştir. Herhangi bir şekilde ekleme ve güncelleme işlemine form kontrolü yaparsak, FormControl sınıfı bize form-invalid durumunu döneceğinden isteklerimiz gerçekleşmeyecektir. Bu işin arka kısmında döndüğü için kullanıcı ekranda henüz bilgilendirilmemektedir. Ekranda gerekli bilgilendirmeyi yapmak için inputlarda ngClass attribute kullanımı gerekmektedir. Her inputun kendine özel ayrı açıklaması için de her input altına ekstra div açılması gerekmektedir.
HTML sayfasının son görünümü bu şekildedir.
