私の研究&実験の後、私は自分の質問に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を渡すこの
something similar on stackoverflow
angular 2 dynamic forms
おそらく、各コンポーネントはそれ自身のバリデーターを保持します。サブミット時に、各コンポーネントは、サービスまたはイベントエミッタを介して親コンポーネントに値を送信します。テストされませんが、これはうまくいくはずです – mickdev
html内部の子コンポーネントにformControlNameプロパティ(レスキューフォームに必要)を追加できません親ディレクティブのエラーをスローしていますfromGroupは存在しません(親に存在するため) –
そのため、各コンポーネントは独自のformControlNameとバリデーターを保持する必要があります。親コンポーネントの役割はフォームをインスタンス化し、送信時にすべてのデータを取得します。子コンポーネントは、有効なイベントまたはエラーイベントを発生させ、親に送信を許可するかどうかを通知します。[ネストされたモデル駆動型](https://scotch.io/tutorials/how-to-build-nested)を参照してください。 -model-driven-forms-in-angular-2) – mickdev