Angularのフォームの紹介：テンプレート駆動型フォーム

フォームは、最新のフロントエンドアプリケーションでは、ログインや検索から予約やTo Listsまで、毎日ユーザーのインタラクションを処理します。 一部のフォームは単純ですが、複数のページにまたがる他の形式は複雑になる可能性があります。このチュートリアルでは、Angularのテンプレート駆動型のフォームアプローチを作成するためのアプローチについて説明します。 選択した方法に関係なく、堅牢なフォームライブラリは次のように提供する必要があります。

• 双方向のデータバインディング：コンポーネント状態と同期した入力値を保持します。
フォーム状態追跡：
• フォームの妥当性を視覚的に示します（たとえば、エラーに赤い境界を使用）。 エラー処理：
検証エラーが明確に表示されます。
• 条件付き有効化/無効化：
検証に基づいてフォームセクションを制御します
• Angular's Form Strategies Angularは、テンプレート駆動型のフォームとモデル駆動型（反応性）フォームの2つの強力なフォーム構築戦略を提供します。どちらも
。

を利用します サインアップフォームの構築：ステップバイステップガイド

この例は、テンプレート駆動型のフォームを使用した単純なサインアップフォームを示しています。

FormsModule

ユーザーモデル：

フォームデータを表すために

クラス（またはインターフェイス）を定義してください：

1. コンポーネントのセットアップ：Userサインアップフォームに必要なコンポーネントとレイアウトを作成します。

   export class User {
       constructor(
           public id: number,
           public email: string,
           public pwd: string,
           public confirmPwd: string,
           public gender: string,
           public terms: boolean
       ) { }
   }

2. ：：を使用して、

   を使用して、コンポーネント内のフォーム入力と
オブジェクトの間の双方向データバインディングに使用します。

3. ngModelフォームの提出：ngModelイベントを使用してフォームの提出を処理します。User

4. コンポーネントロジック：コンポーネントのタイプスクリプトファイルでは、フォームの提出を処理します：(ngSubmit)

5. 完全な例：完全で実行可能な例がGitHubで利用できます（リンクはBrevityのために省略）。 この例には、Bootstrapを使用したスタイリングが含まれます

   onSubmit({ value, valid }: NgForm) {
       console.log(this.user.email);
       console.log("valid: " + valid);
   }

   結論
このチュートリアルは、Angularのテンプレート駆動型のフォームをカバーしています。 より小さなフォームではシンプルで使いやすいですが、このアプローチは複雑なフォームでは管理しやすくなります。 次のチュートリアルでは、よりスケーラブルな代替品としてモデル駆動型のフォームを調べます。

6. この投稿には、Envato Tutsのソフトウェア開発者兼ライターであるEsther Vaatiからの貢献が組み込まれています。

以上がAngularのフォームの紹介：テンプレート駆動型フォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。