こんにちは。コーテッグの小山です。

以前リアクティブフォームのHTML側の記述として、
子コンポーネントでは以下のように書けばいいと書きました。
今回はもうちょっと汎用性のあるコードがありそうだったので探してみました。

↓以前のコード

<form [formGroup]="formGroup">
  <div formGroupName="address">
    <input type="text" formControlName="street">
    <input type="text" formControlName="city"> 
    <input type="text" formControlName="state"> 
    <input type="text" formControlName="zip"> 
  </div>
</form>

少し前までは別の人のコードをみて、htmlでformGroupNameを全て書いてあげる必要があると思っていました。
例えば、formGroup_A > formGroup_B > formGroup_C > formControl_Dという構成であったとします。

その場合、formGroupNameをA, B, Cを書くなり、ループで回すなりと。

<form [formGroup]="formGroup_A">
  <div formGroupName="formGroup_B_name">
    <div formGroupName="formGroup_C_name">
      <input type="text" formControlName="formControl_D_name">
    </div>
  </div>
</form>

上記でももちろん動くのですが、最近フォームの数が多い案件を進めていて、
共通化するのにもっといいやり方がありそうだなと思って探してみました。

formControl.parentを使う。

はじめに試したのはformControl.parentを使うやり方です。
formControl.parentで、formControlの親のformGroupかformArrayを取得できます。

htmlがtsファイルで定義したリアクティブフォームの階層を知っている必要があるのですが、
formGroupは内包するformGroupやformControlの値を知っているので、
[formGroup]=”formControl_D”としてあげればいいのではないかなと思ってやってみました。

<div [formGroup]="formControl_D">
  <input type="text" formControlName="formControl_D_name">
</div>

親がformGroupのときは動きました。しかし親がformArrayのときもあると思います。
そのときは動かないのでは？というのも疑問もありました。

[formControl]で設定してみたらうまくいった。

[formGroup]だけではなく、[formControl]とも書けるので、
formControlNameを使わないで試してみたらいけました。

<input type="text" [formControl]="formControl_D">

これであれば、formArrayのときも対応できますし、シンプルですね。
上記のコードだと短いですが、ラベルとかバリデーションメッセージとかも共通化できるので、
まとめて共通化してしまった方がいいと思います。