リアクティブフォーム

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

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

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

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

          
    import { ReactiveFormsModule } from '@angular/forms';
    @Component({
      selector: 'app-root',
      standalone: true,
      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のリアクティブフォームの使い方を学びました。

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