技術

投稿日:

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

以前リアクティブフォームの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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Macで簡単にIE環境を構築する手順

こんにちは、コーテッグの小山です。 今までちょろっとIE対応をやることはあったの …

[ Ionic ] アプリの画面向きを指定する方法

こんにちは。たなかです。 Ionicフレームワークでモバイルアプリ開発しています …

no image

【AWS】mysqldump&S3バックアップ。それは一瞬の出来事

こんにちは、中田です。 RDSでしっかりとバックアップ! とまでしなくていい場合 …

[SSL] let’s encryptの更新でエラー?!

どうも中田です。 無料でSSL証明書が取得できる今日この頃、いかがお過ごしでしょ …

no image

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …