きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

Angular Material × FormGroup × FormControl実装手順を整理してみた

この記事の目的

この記事は、
Angular Materialを使ったForm開発
を目的としています。

本題

成果物

Angularのコードをシェアできるサービスを使ってみました。
今回作ったものはこちらになります。
angular-dnfjgw - StackBlitz


ReactiveFormsModuleの有効化

モデル駆動型で開発する場合は、ReactiveFormsModuleを有効にする必要があるため、App.moduleとか、Main.moduleに、ReactiveFormsModuleをImportsします。

FormControlの作成

最終的に、FormGroupのインスタンスにFormContorolを紐づけてHtml側に渡すことになりますので、FormGroupを作る前に、必要となるFormContorolを作成します。

  //Sample 1
  private mail = new FormControl("aaa", [Validators.required]);
  //Sample2
  private name = new FormControl(
    {
      value: "name-value",
      disabled: true
    },
    [Validators.required]
  );

第二引数で与えているValidatorsには、必須チェックのほか、Min/Max Length, min/max, 正規表現、メールアドレス形式チェックがあるそうです。
angular.jp

FormGroupの作成

Controlができたので、それらをまとめるFormGroupを作成します。

  myForm = this._formBuilder.group({
    mail: this.mail,
    name: this.name
  });

プロパティは、紐づけるインスタンスと同じ名前にしておくのが無難そうです。


画面の作成

Angular Materialのコードをそのまま利用します。Formタグに、FormGroup属性を付け、2つあるmat-form-field タグ内のInputタグと、textareaタグに、formControlName属性を付け、ひとつ前のステップで作成したFormGroupのプロパティ名を加えると、完成です。

<form class="example-form" [formGroup]="myForm">

  <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" formControlName="mail">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."  formControlName="name"></textarea>
  </mat-form-field>
</form>

FromをSubmitしてみる

ここまでで、画面に入力項目を表示し、その入力項目ごとに入力チェック仕様を追加することができました。最後に、FormをSubmitしてバックエンドにメッセージを送信する手前までの実装を行います。

Formタグ内に、Buttonタグを配置します。ここでは、Angular materialのButtonのサンプルから一つ持ってきたものを利用しています。このButtonタグに、Type="Submit"属性を付与します。さらに、Form内の状態をみて、Validateにエラーがない時だけButtonを押下できるようにするため、[disabled]属性を付与します。

<button mat-raised-button 
          color="primary" 
          type="submit" 
          [disabled]="!myForm.valid" >Primary</button>

次に、Formタグに変更を加えます。属性に(ngSubmit)="onSubmit()" を追加します。これで、FormがSubmitされたときに呼び出すModule(or Component)側のメソッドを定義することができます。この時点では、OnSubmitメソッドをModule側に定義していないので、次に定義します。

<form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">


一般的なメソッドをModule側に追加します。今回は、呼び出すべきサーバーがないので、ログを表示するだけにとどまっています。FormGroupに所属しているFormControlの値を呼び出したい場合は、次の例のように、Valueプロパティの後に、知りたいControlの名前を実装することで、呼び出すことができます。

  onSubmit() {
    console.info(this.myForm.value.mail);
    console.info(this.myForm.value.name);
  }


ButtonのOnClickでメソッド読んでもよいかもしれない・・・

まとめ

こんな感じ。

  • Form Controlの作成
  • Form Group の作成
  • ControlをGroupに紐づける
  • Formタグの画面を構成する
  • Form Group/Controlの情報を画面のそれぞれのコントロールに紐づける
  • Submit用の設定を追加する
  • Submitメソッドを実装する