技術

[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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Ionicアプリのアイコンやスプラッシュ画像を変更したい!

こんにちは。田中です。 現在Ionicを使ったアプリ開発に携わっているのですが、 …

no image

CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: tra …

no image

HTMLエンティティを探すならHTML Arrowsがオススメ!

こんにちは htmlエンティティっていうのを聞いたことがありますか? アンパサン …

[正規表現]半角英数字&記号

どうも中田です。 今更ですが、正規表現の話。 正規表現でこんなパターンがほしい的 …

no image

AWS CLIでInvalidSignatureException Error

ECRにイメージをpushするために、dockerログインしようとして遭遇しまし …