Angularシグナルを使ったフォーム

シグナルフォームは、シグナルのリアクティブな基盤の上に構築することで、Angularアプリケーションのフォーム状態を管理できる実験的なライブラリです。自動双方向バインディング、型安全なフィールドアクセス、スキーマベースのバリデーションにより、シグナルフォームは堅牢なフォームの作成を支援します。

なぜシグナルフォームなのか？

Webアプリケーションにおけるフォームの構築には、フィールドの値の追跡、ユーザー入力の検証、エラーステートの処理、UIとデータモデルの同期といった、相互に関連するいくつかの懸念事項の管理が含まれます。これらの懸念事項を個別に管理すると、ボイラープレートコードと複雑さが生じます。

シグナルフォームは、以下の方法でこれらの課題に対処します:

• 状態を自動的に同期 - フォームのデータモデルを、バインドされたフォームフィールドと自動的に同期します
• 型安全性の提供 - UIコントロールとデータモデル間の完全に型安全なスキーマとバインディングをサポートします
• バリデーションロジックの集約 - バリデーションスキーマを使用して、すべてのバリデーションルールを1か所で定義します

シグナルフォームは、シグナルを使用して構築された新しいアプリケーションで最適に機能します。リアクティブフォームを使用している既存のアプリケーションで作業している場合や、本番環境での安定性の保証が必要な場合は、リアクティブフォームが依然として確実な選択肢です。

前提条件

シグナルフォームには以下が必要です:

• Angular v21以降

セットアップ

シグナルフォームはすでに@angular/formsパッケージに含まれています。@angular/forms/signalsから必要な関数とディレクティブをインポートします:

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

Fieldディレクティブは、フォームフィールドをHTML入力にバインドするすべてのコンポーネントにインポートする必要があります:

@Component({  // ...  imports: [Field],})