Angular, modern web uygulamaları geliştirmek için popüler bir JavaScript çatısıdır. Angular projelerinizde daha verimli çalışmak ve geliştirme süreci...
Angular 13 Validator Kullanımı
Angular'da form uygulamalarımızda verilerin daha düzgün alınması ve gerekli sınırlamalara göre veri girişinin olması oldukça önemlidir. En temel kontrollerden biri alanın dolu olup olmama durumudur. Bunu HTML ile de kontrol edebiliyoruz. HTML'de required deyimi sayesinde boş geçilemez olarak tanımlanmış oluyor. Bunun gibi bir çok kontrolü HTML ile de yapmak mümkündür. Angular'da ise işler biraz farklı. Anlık veri kontrolleri ve kullanıcıya uyarı mesajları vermek mümkündür. Başlıca form kontrolleri arasında zorunlu alan, minumum uzunluk, maksimum uzunluk, özel tanımlı karakterler, e-posta kontrolü, minumum değer ve maksimum değer. Bunların kullanımı ve açıklamarını da aşağıda listeledim.
- Validators.required: Zorunlu, boş geçilemez
- Validators.minLength(3): En az 3 karakterli olmalı
- Validators.maxLenght(50): En fazla 50 karakterli olmalı
- Validators.pattern(''): İçerisine istenilen kural tanımlanır
- Validators.email: Email formatı kontrolü
- Validators.min(10): En az 10 olmalıdır
- Validators.max(20): En fazla 20 olmalıdır
validator.component.ts Dosyasındaki İşlemler
Aşağıdaki gibi gerekli kütüphaneleri import ediyoruz.
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
Sonrasında component içerisinde kullananacağımız alanları tanımlıyoruz. Her alan için istediğiniz kadar validator tanımlayabilirsiniz.
export class ValidatorComponent implements OnInit {userForm: FormGroup;constructor(private formBuilder: FormBuilder) { }ngOnInit(): void {this.createProduct();}//TODO: Validator KullanımıcreateProduct() {this.userForm = this.formBuilder.group({name: new FormControl(null, [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),surname: new FormControl(null, [Validators.required, Validators.minLength(3), Validators.maxLength(40)]),phone: new FormControl(null, [Validators.required, Validators.pattern('(([+][(]?[0-9]{1,3}[)]?)|([(]?[0-9]{4}[)]?))\s*[)]?[-\s\.]?[(]?[0-9]{1,3}[)]?([-\s\.]?[0-9]{3})([-\s\.]?[0-9]{3,4})')]),email: new FormControl(null, [Validators.required, Validators.minLength(3), Validators.email]),dateOfBirth: new FormControl(null, [Validators.required]),ageMin: new FormControl(null, [Validators.required, Validators.min(10)]),ageMax: new FormControl(null, [Validators.required, Validators.min(0), Validators.max(20)]),password: new FormControl(null, [Validators.required, Validators.minLength(4)]),passwordConfirm: new FormControl(null, [Validators.required, Validators.minLength(4)]),});}//TODO Form input alanlarını kontrol etmek içinget name() { return this.userForm.get('name'); }get surname() { return this.userForm.get('surname'); }get phone() { return this.userForm.get('phone'); }get email() { return this.userForm.get('email'); }get dateOfBirth() { return this.userForm.get('dateOfBirth'); }get ageMin() { return this.userForm.get('ageMin'); }get ageMax() { return this.userForm.get('ageMax'); }get password() { return this.userForm.get('password'); }get passwordConfirm() { return this.userForm.get('passwordConfirm'); }}
validator.component.html Dosyasında Uygulama
Örnek form uygulamamız aşağıdaki gibidir. Bu şekilde form kontrolleri yaparak daha düzgün veriler kayıt etmenize ve kullanıcı tarafından gerekli kontrollerin sağlanmasında yardımcı olacaktır.
Umarım faydalı olmuştur. İyi çalışmalar dilerim.
Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.