Angular2 rc1：ネストされたControlGroupを使用する方法？

Question

コントロールグループの仕組みを理解するのに助けてくれる人がいますか？

import { Component, OnInit } from "@angular/core"; 
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from "@angular/common"; 
import { NestedFieldset } from "./nested.fieldset.component"; 

@Component({ 
    selector: 'my-app', 
    directives: [ 
    NestedFieldset 
    ], 
    template: ` 
    <form (ngSubmit)="onSubmit()" [ngFormModel]="form"> 
    <nested-fieldset ngControlGroup="abFields" [parentForm]="form"></nested-fieldset> 

    <label>field c: </label> 
    <input placeholder="fieldC" ngControl="fieldC"/> <br> 

    <button (ngSubmit)="onSubmit()">fancy submit</button> 
    </form> 
`}) 
export class AppComponent { 
    form: ControlGroup; 

    constructor(private fb: FormBuilder) { 
    this.form = fb.group({ 
     abFields: NestedFieldset.getControlGroup(fb), 
     fieldC: [''] 
    }); 
    } 

    onSubmit(){ 
    console.log(" fancy was submitted") 
    console.log(this.form.value) 
    } 
} 

nested.fieldset.component.ts：

import { Component, Input } from "@angular/core"; 
import { TranslatePipe } from "ng2-translate/ng2-translate"; 
import { FormBuilder, ControlGroup, FORM_DIRECTIVES } from "@angular/common"; 

@Component({ 
    selector: 'nested-fieldset', 
    directives: [ 
    FORM_DIRECTIVES], 
    template: ` 
    <fieldset [ngFormModel]="parentForm"> 
    <label>field a: </label><input placeholder="fieldA"/> <br> 
    <label>field b: </label><input placeholder="fieldB"/> <br> 
    </fieldset> 
    ` 
}) 
export class NestedFieldset { 

    @Input() 
    parentForm: ControlGroup; 

    constructor() {} 

    static getControlGroup(fb: FormBuilder) { 
    return fb.group({ 
     fieldA: [''], 
     fieldB: [''] 
    }); 
    } 
} 

ではfieldCがOKで提出し、しかし、私 、私はこの

app.component.tsような何かをしようとしていますネストされたfieldset（fieldAおよびfieldB）からのアクセス値を取ります。

何が間違っていますか？

あなたはplunkerでライブの例を表示することができます。http://plnkr.co/edit/EDqloxqd8xbByejEUZZx?p=preview

Answer 1

updated and working plunker

は、私は（フォームが作成されました例えば）一箇所ですべてのformものを定義し、子供にだけ関連渡すありグループ

export class AppComponent { 
    form: ControlGroup; 
    result: any; 

    // create form at once  
    constructor(private fb: FormBuilder) { 
    this.form = fb.group({ 
     //abFields: NestedFieldset.getControlGroup(fb), 
     abFields: fb.group({ 
     fieldA: [''], 
     fieldB: [''], 
     }), 
     fieldC: [''] 
    }); 
    } 
} 

テンプレート：

// just the abFields group is passed 
    template: ` 
    <form (ngSubmit)="onSubmit()" [ngFormModel]="form"> 
    <nested-fieldset [controlGroup]="form.find('abFields')" ></nested-fieldset> 

    <label>field c: </label> 
    <input placeholder="fieldC" ngControl="fieldC"/> <br> 

    <button (ngSubmit)="onSubmit()">fancy submit</button> 
    </form> 
    <pre> 
    {{result | json}} 
    </pre> 
`}) 

と子はそのようになります：

// see the [ngFormControl]="controlGroup.find('..') in action 
@Component({ 
    selector: 'nested-fieldset', 
    directives: [ 
    FORM_DIRECTIVES], 
    template: ` 
    <fieldset > 
    <label>field a: </label> 
     <input placeholder="fieldA" [ngFormControl]="controlGroup.find('fieldA')"/> <br> 
    <label>field b: </label> 
     <input placeholder="fieldB" [ngFormControl]="controlGroup.find('fieldB')"/> <br> 
    </fieldset> 
    ` 
}) 
export class NestedFieldset { 

    @Input() 
    controlGroup: ControlGroup; 

    constructor() {} 

} 

アクションでhere

NOTEそれを確認してください：私はRC2の世界

https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

Answer 2

がngControls忘れ観察するために開始するとin nested.fieldset.component.ts：

template: ` 
    <fieldset [ngFormModel]="parentForm"> 
    <label>field a: </label><input placeholder="fieldA" ngControl="fieldA"/> <br> 
    <label>field b: </label><input placeholder="fieldB" ngControl="fieldB"/> <br> 
    </fieldset> 

と

app.component.tsを使用する必要があります。

[parentForm]="form.find('abFields')" 

の代わり：

[parentForm]="form"