Yandex Metrica
Angular 13 Validator Kullanımı - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

Angular 13 Validator Kullanımı

14.03.2022 yasinsunmaz 1180 0

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çin
  get 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.

Angular Validator Kullanımı

Angular Validator Kullanımı

Angular Validator Kullanımı

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.

Diğer Yazılar

Visual Studio Code'da Angular İçin En İyi Eklentiler

05.07.2023 yasinsunmaz 615 0

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 "bundle initial exceeded maximum budget" Hatası Çözümü

29.06.2023 yasinsunmaz 282 0

Angular'da aldığım "Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 745.34 kB with a total of 1.73 MB." hatasının çöz&uu...

Angular "exceeded maximum budget" Hatası Çözümü

27.06.2023 yasinsunmaz 329 0

Angular'da aldığım "exceeded maximum budget. Budget 4.00 kB was not met by 10.22 kB with a total of 14.22 kB." hatasının çözümünü bu yazımd...

MIME type ('text/html') is not a supported stylesheet MIME type Hatası Çözümü

27.02.2022 yasinsunmaz 1592 0

Angular'da projenin tasarımını yaparken genel CSS'ler için style.css dosyamı hazırladım. Fakat projeyi çalıştırdığımda CSS kodları sayfada etkin gör...