フォームモデルを設定

すべてのシグナルフォームは、データの形状を定義し、フォームデータを格納するシグナルであるフォームデータモデルから始まります。

このレッスンでは、次の方法を学びます:

• フォームデータのTypeScriptインターフェースを定義
• フォーム値を保持するシグナルを作成
• form() 関数を使用してシグナルフォームを作成

ログインフォームの基礎を構築しましょう!

1. LoginDataインターフェースを定義

   ログインフォームデータの構造を定義するTypeScriptインターフェースを作成します。フォームには次のものが含まれます:

   • email フィールド（文字列）
   • password フィールド（文字列）
   • rememberMe フィールド（真偽値）

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

   このインターフェースを @Component デコレーターの上に追加します。

2. signalとformをインポート

   @angular/core から signal 関数を、@angular/forms/signals から form 関数をインポートします:

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

3. フォームモデルシグナルを作成

   コンポーネントクラスで、初期値を持つ loginModel シグナルを作成します。型パラメータとして LoginData インターフェースを使用します:

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

   初期値は、テキストフィールドには空文字列、チェックボックスには false として開始します。

4. フォームを作成

   モデルシグナルを form() 関数に渡してフォームを作成します:

   loginForm = form(this.loginModel);

   form() 関数は、モデルからフォームを作成し、フィールドの状態とバリデーションへのアクセスを提供します。

すばらしい! フォームモデルを設定しました。loginModel シグナルがフォームデータを保持し、loginForm が型安全性を備えた各フィールドへのアクセスを提供します。

次に、フォームをテンプレートに接続する方法を学びます!