Formunuza doğrulama ekleme

Kullanıcıların geçerli veri girmesini sağlamak için formunuza doğrulama eklemek kritik öneme sahiptir. Signal Forms, form() fonksiyonuna ilettiğiniz bir şema fonksiyonunda doğrulayıcılar (validators) kullanır.

Bu aktivitede şunları öğreneceksiniz:

• Yerleşik doğrulayıcıları içe aktarma
• Formunuz için bir şema fonksiyonu tanımlama
• Özel hata mesajlarıyla belirli alanlara doğrulayıcılar uygulama

Doğrulama ekleyelim!

1. Import the validators

   @angular/forms/signals paketinden required ve email doğrulayıcılarını içe aktarın:

   import {form, FormField, required, email} from '@angular/forms/signals';

2. Add a schema function to your form

   form() çağrınızı, ikinci parametre olarak bir şema fonksiyonu içerecek şekilde güncelleyin. Şema fonksiyonu, her alana erişmenizi sağlayan bir fieldPath parametresi alır:

   loginForm = form(this.loginModel, (fieldPath) => {
     // Validators will go here
   });

3. Add validation to the email field

   Şema fonksiyonunun içinde, e-posta alanı için doğrulama ekleyin. Hem required() hem de email() doğrulayıcılarını kullanın:

   loginForm = form(this.loginModel, (fieldPath) => {
     required(fieldPath.email, {message: 'Email is required'});
     email(fieldPath.email, {message: 'Enter a valid email address'});
   });

   message seçeneği, kullanıcılar için özel hata mesajları sağlar.

4. Add validation to the password field

   required() doğrulayıcısını kullanarak parola alanı için doğrulama ekleyin:

   loginForm = form(this.loginModel, (fieldPath) => {
     required(fieldPath.email, {message: 'Email is required'});
     email(fieldPath.email, {message: 'Enter a valid email address'});
     required(fieldPath.password, {message: 'Password is required'});
   });

Mükemmel! Formunuza doğrulama eklediniz. Doğrulayıcılar, kullanıcılar formla etkileşime geçtikçe otomatik olarak çalışır. Doğrulama başarısız olduğunda, alanın durumu hataları yansıtacaktır.

Ardından, şablonda doğrulama hatalarını nasıl göstereceğinizi öğreneceksiniz!