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

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