Angular にて FormControl を作成する際に、

わけもわからず、UntypedFormControl と記載してプログラムを書いていました。

調べた内容について、まとめます。

Angular14 から追加された機能＝型安全を目指すもの

Angular14 から FormControl はジェネリクスのクラスになり、

型を指定して使うようにアップデートされていました。

1
2
3
4
5

const beforAngular14 = new FormControl(true);

const affterAngular14 = new FormControl<boolean>(true);

→affterAngular14.setValue(100)がエラーになるようになった。

そのため、Angular14 にアップデートすると、

型指定のない FormControl は UntypedFormControl に置き換わるようです。

指定された型と違う型の値を設定している場合、

静的解析でエラーになるので結構重要なアップデートっぽいですね。

Angular14 以降は、特別な理由がない限り UntypedFormControl を使う必要は基本的になさそうですね。

（使い方がわかっていないものは、調べないとダメですね。）

1
2
3
4
5

const beforAngular14 = new FormControl(true);

↓アップデートのタイミングで、AngularCliによって下記に書き換わる。

const beforAngular14 = new UntypedFormControl(true);

型指定により出来ること

この変更により、型がからやなどを指定できるようになりました。

さらに、従来の FormControl に、例えば string の値を入れた時は、

null を含む<string | null>となってしまいました。

しかし、Angular14 からは、下記のように初期値を指定することで、

null を含まないようにできるようです。

また、下記を設定した場合、reset メソッドを使った際に、初期値の値でリセットされます。

（設定しない場合、null になる。）

1
2
3
4
5

const aftterAngular14 = new FormControl(‘新バージョン’, { nonNullable: true });

aftterAngular14.reset();

→「新バージョン」がセットされる。

逆に、UntypedFormControl の使いところは、

インプット内容によって、画面のコントロールの型を動的に変えたい時とかに使えるのかな？