技術

[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

【Rails】idのauto increment設定を削除する

こんにちは railsを触っていてidからauto incrementの設定を削 …

[XCode] clang: error: linker command failed with exit code 1

どうも中田です 本日はシンプルに。 XCodeでbuild時に発生しました。 エ …

[ Ionic ]Cannot find module ‘../node_modules/xml2js’ でVRプラグインを消せない!

こんにちは。たなかです。 Ionicでandroidをbuild中、下記のような …

no image

【ionic】FBログイン時にSafari認証になってしまう

どうも中田です。 ionicでFacebookログインを実装した時に、 Nati …

no image

ng-ifのelse句でコンポーネントのプロパティと名前重複

こんにちは、コーテッグのこやまです。 Angularを触っていたら、コンポーネン …