Angular の開発にてリアクティブフォームを使用しています。

その為、出来ることを調査し、よく使いそうなものまとめていきます。

一つ目は、FormGroup

複数の Form をひとまとめにできる機能です。

ネストさせることもできます。

Validation のチェックや入力内容のクリアを 1 行で済ませることができます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

conditionGroup = new FormGroup({
  employeeId: new FormControl(0),
  firstName: new FormControl({
    nonNullable: true,
    Validators: [Validators.required],
  }),
  LastName: new FormControl({
    nonNullable: true,
    Validators: [Validators.required],
  }),
});
this.conditionGroup.reset();
this.conditionGroup.valid;

二つ目は、FormBuilder

行う内容は FormGroup と同じですが、new FormControl()を宣言する必要がないです。

その為、少しすっきりした書き方に変更することができます。

入力項目が多く、階層構造などが複雑にあるものの場合、FormBuilder の方が見やすくなります。

（上記場合については、公式としても利用することが推奨されている。）

1
2
3
4
5
6

constructor(private fb: FormBuilder) { }
  conditionGroup = this.fb.group({
  employeeId : [0],
  firstName :[{nonNullable:true,Validators:[Validators.required]}]
  LastName : [{nonNullable:true,Validators:[Validators.required]}]
});

また、Angular14 から追加された、NonNullableFormBuilder を使用することで、

null を許容しない FormControl のグループを作成することが出来る。

一つ一つの FormControl に{nonNullable:true}を記載しなくて良くなる。

三つ目は、FormArray

FormArray は、FormControl を配列で動的に管理できるメソッドです。

FormControl を追加する場合は、push メソッドで追加します。

連想配列にはできない為、追加した FormControl には index でアクセスします。

入力項目を動的に増やしたい場合などに使うのかな。

テンプレート駆動フォームについて

HTML 側でコントロールの名称を定義し、

ts 側で、その名前を対象にしてアクセスする。

その為、上で説明したような、FormControl の定義をする必要がない。

あまりよくわかっていないが、リアクティブフォームの方が値の初期値や状態が

ts 側に集約されていて分かりやすいように思う。

（プログラミングする際に、ts、HTML を行き来しなくて良いと言う意味で）