Angular JS nin formlar üzerinde kullanımına geçmeden önce HTML5 ile form validation için gelen bazı özelliklerden bahsetmemiz gerek.
required
input a data girilmeden submit edilmemesini sağlar.
disabled
submit butonumuzun görünürlüğünü ayarlayabileceğimiz özellik. Angular JS directive i olan ng-disabled ile tıklanabilirliği ayarlayacak şekilde kullanacağız.
pattern
Regex sayesinde input a istediğimiz türde karakterlerin girilmesini sağlayabiliriz. Angular JS directive i ng-pattern ile bunu kullanacağız.
min,max
Karakter sayılarını ayarlamamızı sağlayan özellikler. Angular JS nin directive leri olan ng-minlength ve ng-maxlength i kullanacağız.
Form elementlerinden input ları ng-model directive i ile aldığımızı önceki derslerimizde görmüştük. Input unu
almak istediğimiz element e ng-model ekleyerek controller ve directive ler üzerinde bu dataları kullanabiliyorduk.
Bunu basit bir örnek üzerinde görelim.
Bu örneği checkbox,email,radio gibi diğer input tiplerindede deneyerek çoğaltabiliriz.
Angular JS nin event directive lerinden biri olan ng-submit ile form submit edildiği anda istediğimiz fonksiyonu çağırabilir ve formdaki
dataları ona parametre olarak gönderebiliriz. Form Validation
Angular JS form validation için hazır directive ler ile input ları kolayca kontrol edebilmemizi sağlıyor. Belirlediğimiz onaylamanın true ve false geri dönüşüne göre ng-class sayesinde css ile bu inputlar üzerinde istediğimiz görünümleri verebiliyoruz.
Form un validation una göre true ve false dönen directive lerden bazıları ve ne işe yaradıklarına bakalım. Bu directive leri form un name değeri ile çağırarak kullanacağız. Inputlar için ayrı olarak kullanmak için ise form name i ve input name i bir arada yazacağız.
$valid
Form validation u tam olarak istenen şekilde ise true değilse false olur.
$invalid
Form validation u tam olarak istenen şekilde değil ise true istenen şekilde ise false olur.
$dirty
$valid ile aynı görevi görür farkı validation true olduktan sonra kontrolü keser.
$pristine
$invalid ile aynı işlevi görür farkı validation false olduktan sonra kontrolü keser.
$error
Form üzerindeki mevcut validation ların değerlerini JSON olarak geri döner.
Alttaki basit örnek üzerinde kullanımlarını görelim.
Şimdi ng-class directive i ile geri dönüş olarak döndürmek istediğimiz stillerin kullanımını görelim. Ve şimdide Angular JS in asıl validation işlemlerini yapan directive lerine göz atalım.
ng-minlength
inputa girilen datanın alabileceği minimum karakter sayısını belirler.
ng-maxlength
inputa girilen datanın alabileceği maksimum karakter sayısını belirler.
ng-pattern
Javascript RegExp ile input un istediğimiz tipte karakterler almasını sağlayabiliriz. Mesela sadece küçük harf yada sadece hem sayı hem büyük harf gibi.
ng-change
input ta değişik olup olmadığını sınamamızı sağlayan directive.
ng-required
input a data girilip girilmediğini sınayabileceğimiz directive.
ng-disabled
submit butonunun tıklanabilirliğini validation a göre ayarlayan directive.
Form kullanımı hakkında yeni yazılar gelecek. Ders umarım faydalı olmuştur. Sonraki dersimizde görüşmek üzere.
Hiç yorum yok:
Yorum Gönder