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.
export interface UserInformation {
firstName: string;
lastName: string;
gender: number;
school: string;
country: string;
address: string;
email: string;
password: string;
}
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.
userInfo: UserInformation = {
firstName: "",
lastName: "",
gender: 0,
school: "",
country: "",
address: "",
email: "",
password: ""
};
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.
<div class="container-fluid mt-2">
<div class="row">
<div class="col-md-3 mt-5">
</div>
<div class="col-md-6">
<form
name="form"
(ngSubmit)="f.form.valid && onSubmit()"
#f="ngForm" novalidate>
<div class="form-group">
<label for="firstName">First Name</label>
<input
type="text"
class="form-control"
name="firstName"
[(ngModel)]="userInfo.firstName"
#firstName="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }"
required/>
<div
*ngIf="f.submitted && firstName.invalid"
class="invalid-feedback">
<div *ngIf="firstName.errors.required">
First Name is Required!
</div>
</div>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input
type="text"
class="form-control"
name="lastName"
[(ngModel)]="userInfo.lastName"
#lastName="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && lastName.invalid }"
required />
<div *ngIf="f.submitted && lastName.invalid" class="invalid-feedback">
<div *ngIf="lastName.errors.required">
Last Name is Required!
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit!</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
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.
First Name is Required!
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
