リアクティブフォーム

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

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

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

   app.component.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 AppComponent {  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()">
       

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

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