ネストされたフォームAngular 2 JS（RC4以降）

Question

オブジェクトを取り込んで新しいフォームを生成できる動的フォームコンポーネントを構築したいと思います。実際のオブジェクトは、バリデータおよびその他の要件などのより多くの情報が含まれます

[{ 
formgrouplabel: "registration", 
data:[{ 
    type: "checkbox", 
    label: "checkbox 1", 
    name: "checkbox1", 
    default: false, 
    required: false}, 
    { 
    type: "radio", 
    label: "mr", 
    name: "sex", 
    default: true, 
    required: true}, 
    { 
    type: "radio", 
    label: "miss", 
    name: "sex", 
    default: false, 
    required: true}]}, 
{ 
formgrouplabel: "some other part of the form", 
data: [another array with input objects] 
}] 

：私は角RC6にデータの

例を使用しています。また、入力をグループにまとめたい

私は、対応する角度成分建て：私は、データオブジェクト内のすべてのformgroups上ngFor *ダイナミック・フォーム・グループの私のテンプレートで

<dynamic-form></dynamic-form> 
<dynamic-form-group></dynamic-form-group> 
<dynamic-checkbox></dynamic-checkbox> 
<dynamic-radiobutton></dynamic-radiobutton> 

を。次に、ngSwitchCaseを使用してチェックボックスオブジェクトを動的チェックボックスコンポーネントに渡し、ラジオボタンオブジェクトを動的ラジオボタンコンポーネントに渡します。

これはすべてしかし、全体のフォームが生成され、今はうまく動作している：

今入力要素にFormControlを結ぶために、例えばダイナミックチェックボックスcomponenet内部ngModelを使用すると、ngModelではありませんダイナミックフォームコンポーネント（2レベル上）のngFormと通信することができます。 また、dynamic-form-groupコンポーネント内のFormGroupはngFormと通信できません。一言で言えば、子どもからコミュニティーへのコミュニケーションは許されません。

私はng-book 2とすべての例をangle docsで読んでいますが、これについてはきれいな解決策が見つかりません。子要素が親要素と通信するようにするには、@Exportとイベントエミッタを使用してサービスを作成するか、特定の値/オブジェクトまたは関数をエクスポートする必要があります。しかし、これはきれいなソリューションにつながるわけではありません。あなたが最初のコントロールをインスタンス化する必要がありFormBuilderまたはFormGroupとFormControlを使用する場合

私は今それを理解し、問題がある： this.formを=新しいFormGroup（{checkboxControl：新FormControl（「いくつかの値」）}）; （NGブック2に書かれた通り）

または

myForm: FormGroup; 
constructor(fb: FormBuilder) { this.myForm = fb.group({ 
     'sku': ['ABC123'] 
    }); 
} 

これらの両方は、本当に私のためのオプションではありません。オブジェクトモデルのため、私のフォームが最初に作成され、次にフォームグループが作成され、最後にフォームコントロールが作成されます。上記の方法を使用するには、逆の方法が必要です。

最初にフォームグループを作成し、後でコントロールを追加する方法はありますか？ 私はすでにこれを試してみました：

this.form = new FormGroup({}); 
this.form.controls['newControl'] = new FormControl({"some value"}); 

これは、入力の変化の値は、formControlが更新されません。しかしとき、私の既存のFormGroupに新しいformControlを追加ありません。それは私が "新しいFormControl（{"いくつかの値 "}）;"値は常に「ある値」にとどまります。あまりにも彼らが最初formcontrolsを構築し、formgroupを作成するためのオブジェクトとして渡すここ ​​

：

は、最後に私はまた、このアプローチを試してみました。

もちろん、私はすべてのテンプレートとコントロールロジックをダイナミックフォームコンポーネントに入れて、ダイナミックフォームグループ、ダイナミックチェックボックス、およびその他のコンポーネントを除外することができますが、私がこの作業を行う方法はありますか意図されました ？ 誰かが既に新しいフォームapiで何か複雑なものを作ってくれることを願っています。

Answer 1

FormGroupのaddControl()機能をご覧ください。さまざまなシナリオで、FormGroup、FormArray、FormControlなどの便利なビルトインメソッドがあります。使用

/* 
    basic-form-question.component.ts -> From Angular Dynamic Form Documentation 
*/ 
@Component({ 
    selector: 'df-question', 
    templateUrl: './basic-form-question.component.html' 
}) 
export class DynamicFormQuestionComponent implements OnInit { 
    @Input() question: QuestionBase<any>; 
    @Input() form: FormGroup; 

    ngOnInit() { 
     if(!this.form.controls.hasOwnProperty(this.question.key)){ 
      let control = new FormControl(this.question.value || '', Validators.required); 

      this.form.addControl(this.question.key, control); 
     } 
    } 
} 

の

例は、この情報がお役に立てば幸いです。