Angularのリアクティブフォーム

このレッスンでは、Angularアプリケーションで複雑なフォーム処理を行うリアクティブフォームについて学びます。

リアクティブフォームとは

リアクティブフォームでは、プログラムによる方法でフォームを構築・管理するため、柔軟性とバリデーション機能が高まります。

ReactiveFormsModuleのインポート

リアクティブフォームを使用するには、モジュールにReactiveFormsModuleをインポートします。

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

FormGroupの作成

コンポーネントクラスでフォームグループを定義します。

this.myForm = new FormGroup({
  name: new FormControl('')
});

フォームとテンプレートのバインド

テンプレートでformGroupディレクティブを使用して、フォームグループを接続します。

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

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

リアクティブフォームには、入力内容が正しいことを確認するためのValidatorsを簡単に追加できます。

name: new FormControl('', Validators.required)

フォーム送信の処理

コンポーネントクラスで送信イベントを購読して、フォームの送信を処理します。

onSubmit() {
  console.log(this.myForm.value);
}

FormBuilderの使用

FormBuilderサービスを使用すると、フォームの作成が簡単になります。

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

まとめ

リアクティブフォームの構築、バリデーションの処理、フォームの状態の効果的な管理方法を理解できました。よくできました。