技術

[Angular]リアクティブフォームの頻出クラスと定義について

投稿日:

Angularのチュートリアルでは、フォームはngModelで双方向バインドできると学習できますが、
フォームを動的に増減させたい場合や、バリデーションを効かせてエラーメッセージを出すことになりそうな場合は。
リアクティブフォームを使うと便利です。
https://angular.jp/guide/reactive-forms

ただ、ngModelよりも複雑なので、いろんなクラスやメソッドが出てきて、初めて触るとちょっと混乱しがちです。
https://angular.jp/api/forms にはクラスが10個記載されています。

今回は頻出のクラス6つを説明しながらコンポーネントファイルで定義するところまで追っていきます。

Abstruct Control

後述するFormControlとFormGroup、FormArrayの継承元のクラスです。
https://angular.jp/api/forms/AbstractControl
このクラスでは値の検証やバリデーションチェックをしています。

FormGroupのインスタンスに対して指定の方法を誤ってしまうと、
リントで以下のように怒られたりします。

controls does not exist on type AbstractControl

FormGroup, FormControl, FormArray

次はFormGroupとFormControlとFormArrayの説明になります。
リアクティブフォームではフォームの各要素を、
オブジェクトや、配列、プロパティのようなものとして定義して構造化します。
オブジェクトに当たるものがFormGroup、
配列に当たるものがFormArray、
プロパティに当たるものがFormControlです。

https://angular.jp/api/forms/FormGroup
https://angular.jp/api/forms/FormControl
https://angular.jp/api/forms/FormArray

後述するFormBuilderを使った方がシンプルにかけますが、以下のような感じで定義できます。
new FormGroup({})やnew FormControl(”)のようにインスタンスを作って定義することもできますが、
次に書くFormBuilderを使った方がシンプルになります。

FormBuilder

FormBuilder上記のフォーム構造をシンプルに書くことができます。
https://angular.jp/api/forms/FormBuilder

Angularのチュートリアルを参考にした例だと以下のようになります。

import {Validators, FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

~~

constructor( private fb: FormBuilder ){}

ngOnInit() {
  profileForm = this.fb.group({  // formGroupの設定
    firstName: [''],             // formControlの設定
    lastName: [''],
    address: this.fb.group({     // 入れ子状にformGroupを設定
      street: [''],
      city: [''],
      state: [''],
      zip: ['111-1111']          // 初期値を111-1111として定義
    }),
    aliases: this.fb.array([     // formArrayの設定
      this.fb.control(''),
      this.fb.control('')
    ])
  });
}

Validators

デフォルトで用意されているバリデーションのクラスです。
https://angular.jp/api/forms/Validators

ここに記載のないバリデーションを効かせたい場合は、カスタムバリデーションを作る必要があります。

バリデーションの設定方法は以下の通りです。

import { Validators, FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

~~

ngOnInit() {
  profileForm = this.fb.group({  
    firstName: ['', Validators.required],  // バリデーションを1つだけ設定するとき
    lastName: ['', [Validators.required, Validators.required.maxLength(30)]],  // バリデーションを複数つけるときは配列で。
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([     
      this.fb.control(''),
      this.fb.control('')
    ])
  });
}

以上でクラス6つの説明とコンポーネントファイルでの定義の説明は終わりです。
validationを任意のタイミングで設定したりということもできますが、それはまた別記事で書いてみようかと思います。
HTML側でも設定が必要なので次はそれを書いてみようかと思います。

-技術
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

[TypeScript]enumを代入記法で書いた場合に、値からキーが取れるか調べてみた。

TypeScriptのenumのドキュメント(TypeScript Deep D …

[Ionic]UnhandledPromiseRejectionWarning: CordovaError: Requirements check failed for JDK 1.8 or greater

こんにちわ。田中です。 参画しているプロジェクトで使っているのもあって、現在Io …

no image

Macで簡単にIE環境を構築する手順

こんにちは、コーテッグの小山です。 今までちょろっとIE対応をやることはあったの …

no image

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …

no image

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …