👌

@ngneat/reactive-formsからTypedFormsに乗り換える

2023/03/02に公開

Angular14からReactiveFormで型が使えるようになったけど、いくつかハマったのでそのメモです。

型をつけてもnull | undefinedで返ってくる

公式ドキュメントにもありますがnonNullAble: trueをつけるとnullが返ってくるのを防げます。

ちなみに undefined 型にすると form.value でプロパティにアクセスできない時があり、 form.getRawValue() なら undefined のプロパティも空文字でかえってきて取得できます。

参考:
- Avoid undefined in TypedForms in Angular
- Angular value vs getRawValue() difference

Validationの指定の仕方が変わった

validators: []に指定します。

参考: Angular Strictly Typed Forms

removeControlするプロパティはOptionalにしないと型エラー

参考: TypeError for FromGroup.removeControl

初期値に undefined をセットする場合のみ { value: undefined, disabled: false } を指定する

これをしないと型はnullがないにも関わらず、valueChangesでnullが飛んできます。

NG: new FormControl(undefined, { nonNullAble: true })
OK: new FormControl({ value: undefined, disabled: false }, { nonNullAble: true })
参考: FormGroup.getRawValue() or patchValue() translates value undefined of a field to value null

`@ngneat/reactive-forms`の`ControlsOf`はAngularにないので、自前で定義する

ControlsOfは　ControlsOf<{ name: string }> などするとFormControlを作ってくれます。
Angular標準にはありません。

参考: How To Build a Strongly Typed Angular 14 Super Form

Discussion