AngularJS’e Giriş 3 Validation

Selamlar;

Bugün angularjs’de bir form doldurulurken validation nasıl yapılır onu inceleyeceğiz.

Bir form giriş ekranında aşağıdaki maddeleri gerçekleştireceğiz.

  • İsim alanı zorunlu(required)
  • Kullanıcı Adı alanı zorunlu değil ama minimum uzunluk(minimum length) 3, maximum uzunluk(maximum length) 8
  • Email zorunlu değil, ama geçerli(valid) bir email olmalıdır.
  • Eğer form içindeki alanlar geçerli(valid) değil ise gönder buttonu pasif(disabled) olmalıdır.
  • Zorunlu alan ve geçersiz email hatası gösterelim.
  • Eğer sayfa geçerli ise gönder(submit) işleminden sonra olumlu mesaj verelim.

Aşağıda, Form içindeki alanların geçerliliğini angularJS’de anlamamızı sağlayan özellikler listelenmiştir.

rules

Yukarıda Tanımlı Özelliklerin Kullanım Şekli Aşağıdaki Gibidir:

  • Forma erişm: <form ismi>.<angular özeelik>
  • Text Alana erişim: <form ismi>.<input isim>.<angular özellik>
  • novalidate: Bu özellik bizi HTML5’in default validationlarından korur. Burada validation işlemlerini biz kendimiz kontrol ediceğez.
  • Burada ng-model kullanılarak form içindeki veri girişlerinin tamamı angularjs değişkenlerine bağlanmış olunur.
  • ng-minlength ve  ng-maxlength Kullanıcı adı için minimum uzunuk ve maximum uzunluk olarak tanımlanmış kurallardır.
  • İsim alanı required özelliği ile zorunlu hale getirilmiştir.

Aşağıda veri giriş kuralları için oluşturulabilecek diğer angular input directive’leri listelenmiştir.

 rule

Giriş yapılacak form aşağıdaki gibi görülmektedir.

validate

Index.cshtml:

app.js: AngularJS controller ve module’ün tanımlanması ayrıca Form.Submit() durumunda validation kontrolü aşağıdaki gibi yapılmaktadır.

Eğer form’da novalidate özelliğini kullanmasa idi aşağıdaki gibi çok çirkin bir html5 default validation özelliği ile karşılaşılırdı.

validate_html5

Gönder Button’unu Form geçerli olana kadar pasif yapalım: Form alanın’ın invalid özelliği false olana kadar yani form içindeki tüm input alanlar belirlenen kurallara uyana kadar ilgili button pasif kalacaktır. ng-disabled=”userForm.$invalid”

Hata Mesajlarının Gösterilmesi:

Form içindeki input alanlarda belirlenen kurallara uyulmadığı takdirde ilgili hata mesajlarının gösterilmesi aşağıdaki gibidir: Hata mesajlarının gösterimi için “ng-show” directive’i kullanılmıştır. Eğer input alan “$invalid” yani belirtilen kurallara uyulmamış ise ve “$pristine” değil ise yani herhangi bir işlem yapılmış(input alana değer yazılmış) ise ilgili hata mesajı gösterilir.

error1

Hata Mesajlarını Css İle Gösterme: Kullanım şekli => ng-class=”{ <class-tanımlanan> : <belirlenen kurallar> }” Örneğin : “ng-class=”{ ‘has-error’ : userForm.username.$invalid && !userForm.username.$pristine” } Kullanıcı adı boş ise ve içine önceden bir değer yazılmış ise ‘has-error’ css’i ilgili div’e atanır.

validate 2

Şimdi sıra geldi sadece Form Submit’de ilgili hata mesajının gösterilmesine:

1-) Öncelikle app.js’e “$scope.submitted = true;” parametresine true değeri atanır.

2-) Submit (Gönder) buttonundaki “ng-disabled=”userForm.$invalid”” yani buttonu pasif etme durumu kaldırılır.

3-) ng-class=”‘has-error’ : userForm.name.$invalid && !userForm.name.$pristine }” kuralına submitted eklenir. Yani ng-class=”‘has-error’ : userForm.name.$invalid && !userForm.name.$pristine && submitted }” şeklinde yapılır. Bu işlemi tüm form üzerindeki “ng-class” ve “ng-show”‘lar için yapılır. Böylece ilgili hatalar submit işleminden sonra gösterilir.

Gelidik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

5 Cevaplar

  1. çağrı dedi ki:

    Abi web api ile kullanıp crud ve authentication yapabileceğimiz bir örnek yayınlayabilirmisiniz ?

  2. cagri dedi ki:

    abi bir sorum olacaktı mvc de controllere parametre verip ona göre view gönderebiliyorduk.
    mesela ürünler var ben ilk ürüne basıyorum urunler/1 e gitmesi gerekiyor ve bir view var dinamik olarak içi doluyor.
    html ve javascripte nasıl yapabilirim bunu ?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir