テンプレート駆動フォーム

このレッスンでは、Angularのテンプレート駆動フォームについて学び、シンプルなフォームをすばやく作成できるようにします。

テンプレート駆動フォームとは

テンプレート駆動フォームでは、HTMLテンプレートとAngularディレクティブを使用して、フォームの作成、検証、送信を簡単に処理します。

FormsModuleのインポート

テンプレート駆動フォームを使用するには、AngularモジュールにFormsModuleをインポートします。

import { FormsModule } from '@angular/forms';

シンプルなフォームの作成

ngFormディレクティブを使用して、テンプレートにシンプルなフォームを定義します。

<form #form="ngForm">
  <input name="username" ngModel>
</form>

ngModelによる双方向バインディング

ngModelは、双方向データバインディングを使用してフォームコントロールとコンポーネントのプロパティを結び付けます。

<input [(ngModel)]="user.name" name="username">

フォームの送信

Angularのイベントバインディングを使用して、フォームの送信を簡単に処理します。

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

フォームのバリデーション

Angularには、requiredやminlengthなどの便利なバリデーションディレクティブが用意されています。

<input name="username" ngModel required minlength="4">

フォームの状態へのアクセス

テンプレート変数を通じて、有効性や操作済みの状態など、フォームの状態にアクセスします。

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

まとめ

テンプレート駆動フォームを使用して、フォームの作成、バインド、検証、送信を簡単に行う方法を学びました。練習を続けていきましょう。