技術

投稿日:

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

以前リアクティブフォームの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のときも対応できますし、シンプルですね。
上記のコードだと短いですが、ラベルとかバリデーションメッセージとかも共通化できるので、
まとめて共通化してしまった方がいいと思います。

-技術
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Angularでビューのパラメーターを詳細まで見たいときのコード

こんにちはコーテッグのこやまです angularでviewのパラメーターがうまく …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

no image

wordpressで固定ページが表示されない時は.htaccessを確認しよう

こんばんは 個人でwordpressサイトを持っているのですが いきなり固定ペー …

Chrome開発者ツールの背景を黒にする

普段コーディングしている時は、背景黒の方が目に優しい気がするのでエディターの背景 …

no image

HTMLタグだけでアコーディオンを実装する

こんにちは htmlタグのdetailsというのは知っていますか? 僕も初めて知 …