Form modelini oluşturma

Her Signal Form, bir form veri modeli ile başlar - verilerinizin şeklini tanımlayan ve form verilerinizi depolayan bir sinyal.

Bu derste şunları öğreneceksiniz:

• Form verileriniz için bir TypeScript arayüzü (interface) tanımlama
• Form değerlerini tutmak için bir sinyal oluşturma
• Signal Form oluşturmak için form() fonksiyonunu kullanma

Giriş formumuzun temelini oluşturalım!

1. LoginData arayüzünü tanımlayın

   Giriş formu verilerinizin yapısını tanımlayan bir TypeScript arayüzü oluşturun. Form şunları içerecek:

   • Bir email alanı (string)
   • Bir password alanı (string)
   • Bir rememberMe alanı (boolean)

   interface LoginData {
     email: string;
     password: string;
     rememberMe: boolean;
   }

   Bu arayüzü @Component dekoratörünün üzerine ekleyin.

2. signal ve form fonksiyonlarını içe aktarın

   @angular/core paketinden signal fonksiyonunu ve @angular/forms/signals paketinden form fonksiyonunu içe aktarın:

   import {Component, signal} from '@angular/core';
   import {form} from '@angular/forms/signals';

3. Form modeli sinyalini oluşturun

   Bileşen sınıfınızda, başlangıç değerleriyle bir loginModel sinyali oluşturun. Tür parametresi olarak LoginData arayüzünü kullanın:

   loginModel = signal<LoginData>({
     email: '',
     password: '',
     rememberMe: false,
   });

   Başlangıç değerleri, metin alanları için boş dizeler ve onay kutusu için false olarak ayarlanır.

4. Formu oluşturun

   Şimdi model sinyalinizi form() fonksiyonuna ileterek formu oluşturun:

   loginForm = form(this.loginModel);

   form() fonksiyonu, modelinizden bir form oluşturarak alan durumu ve doğrulama erişimi sağlar.

Mükemmel! Form modelinizi kurdunuz. loginModel sinyali form verilerinizi tutar ve loginForm tür güvenliğiyle her alana erişim sağlar.

Ardından, formunuzu şablona nasıl bağlayacağınızı öğreneceksiniz!