Angular Template Driven Form Validation Örnek Ugulama

Categories AngularPosted on

Angular ile form oluşturmak için Reactive Form ve Template Driven Form kullanılabilir. Bu iki yöntem arasındaki farklara angular.io adresinden ulaşabilirsiniz.

Template Driven yani şablon odaklı formlar bir çok uygulamanın temelini oluşturur. Giriş yapmak, kullanıcı verilerini almak, yardım isteği, sayısız veri girişi yapmak için kullanılabilir.

Form uygulamalarında kullanıcı verilerini sunucuya göndermeden önce doğrulamak isteriz. Kullanıcı yanlış veri girişi yaptığında onu uyarmak, boş bırakılan bir giriş alanını doldurmasını istemek formlar için gerekli bir işlemdir. Peki Angular 7 ile form doğrulama nasıl yapılır? Angular 7 Template Driven Form Doğrulama nasıl yapılır?

Angular uygulamasında form doğrulama işlemi yapmak için ilk olarak bir interface oluşturalım. Bu sayede form verilerini kolayca alabilir ve kullanabiliriz.

Interface oluşturduktan sonra .ts dosyasında, html tarafında kullanmak için bir değişken oluşturalım. Ben bu değişkene userInfo ismini verdim. Başlangıç değerlerini el ile atadım. Burada farklı değerler atayabilirsiniz.

Daha sonra .html dosyasına aşağıda yer alan kod bloğunu ekleyelim. Doğrulama işlemini gerçekleştirmek için dosyada bir adet form elementi yer alıyor ve en altta yer alan buton yardımı ile submit işlemini gerçekleştiriliyor.

 

Submit işleminde çalışacak olan fonksiyonu belirtmek için (ngSubmit)=”f.form.valid && onSubmit()” kullandım. Bu sayede form girişleri doğru değil ise submit işlemi gerçekleşmeyecektir.

[(ngModel)]=”userInfo.firstName” #firstName=”ngModel” -> Satırları ile .ts dosyasında oluşturduğumuz değişkeni model olarak belirtiyoruz.

Doğrulama işlemi için #firstName olarak isimlendirdiğimiz etiketi kullanmalıyız. Butona basıldığında giriş alanlarının doğruluğunu kontrol etmek için her giriş grubunun altında yanlış girişleri belirtmek için metinler yer alıyor.

Yukarıda yer alan kodda hata içeren giriş alanlarının belirtilmesi gösterilmiştir. Hata mesajını göstermeden önce kullanıcının butona bastığını kontrol ediyoruz. Butona basıldıysa ve giriş alanı geçerli değil ise mesajımızı kullanıcıya gösteriyoruz.

Oluşturmuş olduğum interface içerisinde yer alan tüm değişkenleri kullandığım projeye GitHub üzerinden ulaşabilirsiniz. Projeye ulaşmak için aşağıdaki linki kullanabilirsiniz.

https://github.com/biergec/angular-forms-application

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.