Formunuzu şablona bağlama

Şimdi, [formField] direktifini kullanarak formunuzu şablona bağlamanız gerekiyor. Bu, form modeliniz ile input elemanları arasında iki yönlü veri bağlama oluşturur.

Bu derste şunları öğreneceksiniz:

• FormField direktifini içe aktarma
• Form alanlarını input'lara bağlamak için [formField] direktifini kullanma
• Metin input'larını ve onay kutularını formunuza bağlama
• Form alan değerlerini şablonda görüntüleme

Şablonu bağlayalım!

1. Import the FormField directive

   @angular/forms/signals paketinden FormField direktifini içe aktarın ve bileşeninizin imports dizisine ekleyin:

   import { form, FormField } from '@angular/forms/signals';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.html',
     styleUrl: './app.css',
     imports: [FormField],
   })

2. Bind the email field

   Şablonunuzda, e-posta input'una [formField] direktifini ekleyin:

   <input type="email" [formField]="loginForm.email" />

   loginForm.email ifadesi, formunuzdaki e-posta alanına erişir.

3. Bind the password field

   Parola input'una [formField] direktifini ekleyin:

   <input type="password" [formField]="loginForm.password" />

4. Bind the checkbox field

   Onay kutusu input'una [formField] direktifini ekleyin:

   <input type="checkbox" [formField]="loginForm.rememberMe" />

5. Display the form values

   Formun altında, mevcut form değerlerini gösteren bir hata ayıklama bölümü var. .value() kullanarak her alan değerini görüntüleyin:

   <p>Email: {{ loginForm.email().value() }}</p>
   <p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
   <p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>

   Form alan değerleri sinyaldir, bu nedenle siz yazdıkça görüntülenen değerler otomatik olarak güncellenir.

Harika iş! Formunuzu şablona bağladınız ve form değerlerini görüntülediniz. [formField] direktifi iki yönlü veri bağlamayı otomatik olarak yönetir - siz yazdıkça loginModel sinyali güncellenir ve görüntülenen değerler anında güncellenir.

Ardından, formunuza doğrulama eklemeyi öğreneceksiniz!