AngularJS - 7 - Form Validation

Yapısına bakığımızda AngularJS MVC mantığını client-side yani kullanıcı tarafında gerçekleştirebilen bir platform. Dolayısı ile form kontrolleri için ideal bir durum sunuyor. sunucu tarafına istek yapılmaksızın girilen değerler belirli ölçülerde kontrol edilebilir.

HTML5 özelliği olan "required" anahtar kelimesi ile zorunlu alanlar işaretlenebilir, ve "$valid" ile giriş olup olmadığı kontrol edilebilir.

NOT : Ancak unutulmaması gereken kullanıcı tarafındaki validasyonlar gerek olmasına rağmen yeter değildir, güvenlik adına sunucu tarafında kontrol gereklidir.

AngularJS te input ve form calidasyonları mevcut ve hepsi "true / false" değerlerini alırlar. inoput state leri:

• $untouchedHenüz alana dokunulmadı.
• $touched  Alana dokunuldu.
• $pristine Henüz alan değiştirilmedi.
• $dirty    Alan değiştirildi.
• $invalid  İçerik geçerli değil.
• $valid    İçerik geçerli.

Form a ilişkin stateler:

• $pristine  Hiçbir alan değiştirilmedi.
• $dirty     Bir veya daha çok alan değiştirildi.
• $invalid   Form içeriği geçersiz.
• $valid     Form içeriği geçerli.
• $submitted Form submit edildi.

Kontrollü olarka css değiştirip input alanın rengi veya görüntsü ile girişin değerine ilişkin bilgilendirici bir görsel uygulamak mümkün.

yukarıdaki şekilde, style eklemesi ile input alanına örnekteki şekilde renklendirme eklenebilir.

Kendi validation'ınızı eklemek için ise aşağıdaki şekilde bir yaklaşım izlemeniz yeterli olaraktır.