リアクティブフォーム

テンプレートに頼らずフォームをプログラムで管理する場合、リアクティブフォームが答えとなります。

このアクティビティでは、リアクティブフォームの設定方法を学びます。

1. ReactiveFormsモジュールのインポート

   app.tsで、@angular/formsからReactiveFormsModuleをインポートし、コンポーネントのimports配列に追加します。

   import { ReactiveFormsModule } from '@angular/forms';
   
   @Component({
     selector: 'app-root',
     template: `
       <form>
         <label>Name
           <input type="text" />
         </label>
         <label>Email
           <input type="email" />
         </label>
         <button type="submit">Submit</button>
       </form>
     `,
     imports: [ReactiveFormsModule],
   })

2. FormGroupオブジェクトをFormControlsで作成

   リアクティブフォームは、FormControlクラスを使用してフォームコントロール（入力など）を表します。Angularは、フォームコントロールを便利なオブジェクトにグループ化し、開発者が大規模なフォームをより簡単に処理できるようにするFormGroupクラスを提供します。

   @angular/formsからのインポートにFormControlとFormGroupを追加して、各フォームにFormGroupを作成し、nameとemailのプロパティをFormControlとして使用します。

   import {ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
   ...
   export class App {
     profileForm = new FormGroup({
       name: new FormControl(''),
       email: new FormControl(''),
     });
   }

3. FormGroupとFormControlsをフォームにリンク

   各FormGroupは、[formGroup]ディレクティブを使用してフォームにアタッチする必要があります。

   さらに、各FormControlはformControlNameディレクティブでアタッチし、対応するプロパティに割り当てることができます。次のフォームコードを使用してテンプレートを更新します。

   <form [formGroup]="profileForm">
     <label>
       Name
       <input type="text" formControlName="name" />
     </label>
     <label>
       Email
       <input type="email" formControlName="email" />
     </label>
     <button type="submit">Submit</button>
   </form>

4. フォームの更新を処理

   FormGroupからデータにアクセスする必要がある場合は、FormGroupの値にアクセスすることで行うことができます。テンプレートを更新してフォームの値を表示します。

   ...
   <h2>Profile Form</h2>
   <p>Name: {{ profileForm.value.name }}</p>
   <p>Email: {{ profileForm.value.email }}</p>

5. FormGroupの値にアクセス

   コンポーネントクラスに、後でフォームの送信処理に使用されるhandleSubmitという新しいメソッドを追加します。 このメソッドはフォームの値を表示します。FormGroupから値にアクセスできます。

   コンポーネントクラスに、フォームの送信を処理するhandleSubmit()メソッドを追加します。

   handleSubmit() {
     alert(
       this.profileForm.value.name + ' | ' + this.profileForm.value.email
     );
   }

6. ngSubmitをフォームに追加

   フォームの値にアクセスできるようになりました。次は、送信イベントを処理し、handleSubmitメソッドを使用します。 Angularには、ngSubmitというこの特定の目的に合わせたイベントハンドラーがあります。フォーム要素を更新して、フォームが送信されたときにhandleSubmitメソッドを呼び出します。

   <form [formGroup]="profileForm" (ngSubmit)="handleSubmit()"></form>

このようにして、Angularのリアクティブフォームの使い方を学びました。

このアクティビティはすばらしいですね。フォームの検証について学ぶために進んでください。