はどのように私は別のformGroup

Question

にformGroupを追加することができ、私は親フォームにフォームコントロールを追加する方法を示し、この答えが見つかりました：

Reuse components in angular2 model driven forms

を、私は新しいformGroupsを追加できるようにしたいと思いますこのようなページの異なる領域。

<nutrition [parentForm]="myForm"></nutrition>

import { Component, OnInit, Input } from '@angular/core'; 
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'nutrition', 
    template: ` 
    <div [formGroup]="parentForm"></div> 
    ` 
}) 
export class NutritionComponent implements OnInit { 

    @Input() parentForm: FormGroup; 

    nutritionGroup: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
     this.nutritionGroup = new FormGroup({ 
     blank: new FormControl('', Validators.required) 
     }); 
     this.parentForm.addControl('nutrition', this.nutritionGroup); 
    } 
} 

が、私のことができます。私はこのようなnutrition formGroupを追加することができました

{ 
    name: '', 
    nutrition:{ 
     calories: { 
     total: '' 
     // more 
     }, 
     carbs: { 
     total: '' 
     // more 
     } 
} 

：

<form [formGroup]="myForm"> 
    <!--... other inputs --> 
    <md-tab-group formGroupName="nutrition"> 
    <md-tab formGroupName="calories"> 
     <template md-stretch-tabs="always" md-tab-label>Calories</template> 
     <template md-tab-content> 
     <calories></calories> <!-- I want to add controll groups like this--> 
     </template> 
    </md-tab> 
    <md-tab formGroupName="carbs"> 
     <template md-stretch-tabs="always" md-tab-label>Carbs</template> 
     <template md-tab-content> 
     <carbs></carbs> 
     </template> 
    </md-tab> 
    </md-tab-group> 
</form> 

全体形状モデルは次のようになります。 フォームで渡す方法を理解していないこのようなcalories formGroupのグループ：

<calories [parentControl]="nutrition"></calories>

import { Component, OnInit, Input } from '@angular/core'; 
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'calories', 
    template: `` 
}) 
export class CaloriesComponent implements OnInit { 

    @Input() parentControl: FormGroup; 
    caloriesForm: FormGroup; 

    constructor(private _fb: FormBuilder) { } 
    ngOnInit(){ 
    this.caloriesForm = new FormGroup({ 
     blank: new FormControl('', Validators.required) 
     }); 

    this.parentControl.addControl('calories', this.caloriesForm); 
    } 
} 

はこれを行うことができますか？

Answer 1

まだ興味がある人は、parentControlにコントロールを追加した後、それを親コンポーネントに戻して更新する必要があります。

親html要素で

import { Output, EventEmitter } from '@angular/core'; 

@Output() onFormGroupChange: EventEmitter<FormGroup> = new EventEmitter<FormGroup>(); 

this.parentControl.addControl('calories', this.caloriesForm); 
this.onFormGroupChange.emit(this.parentControl); 

、あなたが戻ってparentControlにそれをreasignする必要があります。 (onFormGroupChange)="setParentControl($event)"

そして、あなたのTSの方法

public setParentControl(formGroup: FormGroup) { 
    this.myForm = formGroup; 
} 

次に、あなたがあなたのFormGroup myFormに制御を持っています親要素で好きなことをしてください： console.log(this.myForm.controls['calories'])

すべてのコードは含まれていませんが、必要なもののみ：