AngularJS Model | Form Validasyonu | Angular
AngularJS’ te Model nedir ? ve Model Options konusuna http://angulartr.com/angularjs-model-model-options-giris/ adresinde değinerek Model’ e giriş yapmıştık. Bu konumuzda ise, Formlarda yer alan modellerin validasyonunu nasıl ele alacağımıza değineceğiz.
Öncelikle https://docs.angularjs.org/api/ng/type/form.FormController#$pristine adresinden, kullanabileceğimiz Form Controller özelliklerine bakabiliriz.
Öncelikle size bir deneme tahtası sunucam. Form da yer alan model lere bağlı input ların değerleri ile oynarsanız, form controller özelliklerinin canlı olarak değiştiğini göreceksiniz.
AngularJS Validasyon on jsbin.com
Anlık Takip kısmını, formumuzdaki inputlar ile oynarken sürekli olarak takip ediyoruz.
Bir model’ in değeri ile hiç etkileşime girilmediyse o modelin pristine değeri true dur. Değeri değiştirildiği anda pristine’ si false olur. Tekrardan eski değerine alınsa bile.
İnput a bir kere focus olunduktan sonra artık touched değeri true olur.
Pristine’ nin tam tersidir.
Bağlı olduğu input için yazılan kuralın sağlanıp sağlanmadığı konusunda true yada false değer döner.
Tüm alanların Pristine özelliğinin başlangıçta True olduğunu görebiliyoruz. Bu özelliği Anlık takipte gösteren satır yeşil renkte. İsim input una değer girmeye başladığımızda, İsim ve dahil olduğu Form’ un pristine özelliği false oluyor. Ve artık dirty özelliği yeşil oluyor. Çünkü pristine’ nin tersi Dirty’ dir. Keza isim input u touched oldu. Çünkü dokunduk.
Kullanıcı Adı’ na a harfini tuşladığımızda hemen kırmızıya dönüyor. VE Anlık takip kısmında da valid özelliği kızarıyor. Çünkü Kullanıcı adını tutan input’ un ng-minlength=”3″ ng-maxlength=”8″ gibi özellikleri var. Biz sadece a harfini tuşladığımızda, en az karakter 3 olarak belirlendiği için uymuyor ve kızarıyor.
Email adresine de asd yazdığımda kızarıyor. Çünkü type=”email” olan bir input içinde @ işareti bulunan bir string bekler. asd yazarsak bu email değildir.
Umarım Formlardaki modellerin valid liğinin neye göre kontrol edildiğini daha iyi anlamışızdır.
Validasyon’ u bir adım daha ileriye götürerek pattern eklemek istiyorum. Aşağıdaki örneği inceleyelim.
Kutucuğa harf girerseniz kızarıyor, sayı girerseniz hata göstermemektedir. Çünkü ng-pattern değeri aşağıdaki gibidir;
“Form Controller API’ ını kullanımını inceleyelim”
Herşeyi görsek olarak test ettik. Lakin kullanmak için gerekli olan kodu şimdi inceliyoruz.
Formunuzda bulunan herhangi bir input’ un yukarıda incelediğimiz özelliklerine erişmek için yazmanız gereken değer şu formatta olmalıdır.
Form İsmi . İnput İsmi . Özellik
Formumuzun İsmi : userForm
İnput ismi : name
Özellik : $invalid
Bu değerleri View’ da nasıl kullanmalıyız ?
Bu değerler genellikle ng-show ve ng-disabled AngularJS Directive leri içinde kullanılır.
Her input’ unuzun hatalı olması durumunda göstereceğiniz mesajı View’ a yazarsınız. Lakin mesajınızın içinde bulunduğu element’ e ng-show directive’ i eklersiniz. Bu sayede o mesaj için beklediğiniz koşul gerçekleşirse, ng-show değeri true olur ve mesajınız gözükmeye başlar. Koşul geçerliliğini kaybettiğinide, örneğin 5 karakter olması gereken yere 3 karakter girilmişti ama 5 karaktere tamamlandı, bu durumda ng-show değeri tekrar false olacak ve hata mesajı gösterilmeyecektir.
<p ng-show="userForm.username.$error.minlength" class="help-block">kullanıcı ismi çok kısa.</p>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength" class="help-block">kullanıcı ismi çok kısa.</p>
Kullanıcı ismi için ng-minlength 3 verilmiş. Biz en az 3 karakter yazana kadar userForm.username.$error.minlength değeri true olacak ve hata mesajı gösterilecektir.
Dikkkatt: Sayfamızı ilk açtığımızda, zaten tüm inputlar boş fakat neden hemen kullanıcı ismi boş demiyor ?
Çünkü userForm.username.$error.minlength değeri, userForm.username.$pristine değeri false olduktan sonra ancak true oluyor. Bu sayede kullanıcı herhangi bir deneme yaptıktan sonra, girdiğin değer geçerli değil diyoruz.
Ayrıca ng-disabled kullanımını inceleyelim;
Formun submit edilebilmesi için Formun valid olması yani forma bağlı tüm inputların valid olması gerekiyor. Aksi halde submit butonu disabled oluyor.
“Bu değerleri Controller’ da nasıl kullanmalıyız?”
Çok basit, view’ daki kullanımın başına $scope ekleyerek.
Model konusunda daha da detaylı bilgiler için AngularJS Dersleri kategorimizi takip etmeyi unutmayın.
form form validasyonu	NEXT READING