2017-03-01 19 views
12

私の要件は、ネストされたコンポーネントでフォームを作成する必要があるということです。 フォームフィールドごとにコンポーネントを作成していますが、テキストボックスの場合は が1つのコンポーネントになります。ラジオボタンの場合は、賢明な別のコンポーネントがあります。
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>
ネストされたコンポーネントと反応す​​るフォームを作成する角2

そして私は、私は私の HTMLがそのままことだけtypescriptですを通じて私のフォームの検証をしたいと、このフォームを作成するための反応性のフォームを使用します。

しかし、 コンポーネントでネストされた反応性フォームをどのように持つことができるかはわかりません。

+0

おそらく、各コンポーネントはそれ自身のバリデーターを保持します。サブミット時に、各コンポーネントは、サービスまたはイベントエミッタを介して親コンポーネントに値を送信します。テストされませんが、これはうまくいくはずです – mickdev

+0

html内部の子コンポーネントにformControlNameプロパティ(レスキューフォームに必要)を追加できません親ディレクティブのエラーをスローしていますfromGroupは存在しません(親に存在するため) –

+0

そのため、各コンポーネントは独自のformControlNameとバリデーターを保持する必要があります。親コンポーネントの役割はフォームをインスタンス化し、送信時にすべてのデータを取得します。子コンポーネントは、有効なイベントまたはエラーイベントを発生させ、親に送信を許可するかどうかを通知します。[ネストされたモデル駆動型](https://scotch.io/tutorials/how-to-build-nested)を参照してください。 -model-driven-forms-in-angular-2) – mickdev

答えて

20

私の研究&実験の後、私は自分の質問に1つの答えを見つけました。誰かの時間を節約すれば、私は幸せになれます。

あなたがネストされたコンポーネントと反応す​​るフォームを作成したい場合は、あなたがここで私はあなたの親コンポーネントがネストされた2つのコンポーネントのラジオボタンの他​​のテキストボックス&ための1

でフォームをすることができます作成​​してい

以下のように行うことができます私たちは、子コンポーネントへの入力として親コンポーネント で作成された子コンポーネントへの入力としてFormGroupオブジェクトを渡しているこの

<form [formGroup]="myForm"> 
    <child-textbox-component [parentFormGroup]="myForm"> 
    </child-textbox-component> 
    <child-radio-button-component [parentFormGroup]="myForm"> 
    </child-radio-button-component> 
</form> 

ようになりますS、彼らは

あなたの子コンポーネントがこの

子-テキストボックス成分

<div class="form-group" [formGroup]="parentFormGroup"> 
    <label> 
    {{control.caption}} 
    </label> 
    <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name" 
    [value]="control.defaultValue" [formControlName]="control.name"/> 
</div> 

子供に放射性ようになるクラスの特定の制御を設計するために彼らの コンポーネントでこのFormGroupオブジェクトを使用します。ボタンコンポーネントここ

<div class="form-group" [formGroup]="parentFormGroup"> 
    <label> 
    {{control.caption}} 
    </label> 
    <div> 
     <label *ngFor="let value of control.values; let idx = index" 
     class="radio-inline" [title]="control.tooltip"> 
     <input type="radio" [name]="control.name" [formControlName]="control.name"/> 
     {{ value }} 
     </label> 
    </div> 
</div> 

コントロールこれらために表示されるモデルクラスの保持データであります10個の子コンポーネント。

というネストされたコンポーネントを使用してフォームを生成することができますので、単一の コンポーネントでフォームを持たなくても大丈夫です。多くのサブコンポーネントに分割することができます。&フォーム &も簡単に作成できます。角度2の反応形式を使用することもできます。また、検証も簡単に追加できます。

私はちょうど[formGroup]結合を形ブロックで同じまたはサブformGroupを渡すこの

  1. something similar on stackoverflow

  2. angular 2 dynamic forms

+4

子コンポーネントでどのように検証を行っていますか?子コンポーネントからfromコンポーネントにバリデーションを追加することも、親コンポーネントからすべてのバリデーションを定義することもできますか? .tsファイルコードを投稿できます –

+7

この回答は役に立ちそうですが、不完全です。あなたのTSコードを投稿してもらえますか?すなわち、FormGroupオブジェクトとそのコントロールを設定する方法と場所。 – sgroves

+0

このチュートリアルは、この素晴らしいhttps://toddmotto.com/component-architecture-reactive-forms-angular#the-presentational-formに従うことができます – Tabares

0

に応答する前にこれらのリンクを行いました。

関連する問題