Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< t-sql foreignkey select query | AngularJS ng-repeat>>

AngularJS form validation

Yazar harunozer 03 July 2014

AngularJS form validation AngularJS ye önceki makalede giriş yapmıştık. Şimdi de AngularJS de form işlemlerinin nasıl yapıldığına göz atalım.

AngularJS standart submit olayını ele geçirir ve formun sunucuya javascript ile gönderilip sayfa yenilenmeden işlemler yapılmasını sağlar. Bunun için ng-submit veya ng-click attirbuteleri kullanılır, action attirbute leri kullanılmaz. AngularJS validation kontrolü de sağlar. Validation durumuna göre form etiketine css class değerleri eklenir.

ng-invalid : Form doğrulanmadıysa

ng-valid : Form doğrulandıysa

ng-pristine : Formdaki herhangibir input değiştirilmediyse.

ng-dirty : Formdaki input(lar) değiştirildiyse

Input bazlı da validation kontrolü yapılabilinir. formName.InputName.$error.ValidationName şeklinde kontrol yapılabilinir. Örneğin form name i uyeform olsun. ad inputu required olsun. Bu inputun validation kontrolü uyeform.ad.$error.required ile kontrol edilir. Eğer true değer verir ise validation kontrolünden geçememiştir.

uyeform.ad.$valid true ise validation dan geçmiştir.

uyeform.ad.$error nesne verir. {"required":false} gibi.

uyeform.$valid = formda ki bütün inputlar validationdan geçmiş ise true verir.

İnput elementleri validation için aşağıdaki attirbuteleri alır.

required: zorunlu

ng-minlength: en az kaç karakter olacağını belirtir.

ng-maxlength: en fazla kaç karakter olacağını belirtir.

ng-pattern: regex ile pattern kontrolü yapılır.

ng-change: değiştiğinde bu olay tetiklenir.

Chckbox inputta aşağıdaki ng-true-value ve ng-false-value attirbute ler i de kullanılabilinir.

ng-true-value: checked olduğunda ki değeri

ng-false-value: checked olmadığında ki değeri

örnek uygulama: http://jsfiddle.net/harunozer/5WWFV/

Tam Sayfa
Tags angularJS,
Kategoriler AngularJS
İşlemler
Bu Makale 11  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri