Angular2 RC1: wie verschachtelte ControlGroups zu verwenden?

Question

Bitte, kann mir jemand helfen zu verstehen, wie die Kontrollgruppe funktioniert. Ich versuche, so etwas wie dieses

app.component.ts zu tun:

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: [''] 
    }); 
    } 
} 

Auf einreichen fieldC OK ist, aber ich kann nicht auf Werte von verschachtelten fieldset (fieldA und fieldB) zugreifen.

Was ist los?

Sie anschauliches Beispiel auf Plunker betrachten: http://plnkr.co/edit/EDqloxqd8xbByejEUZZx?p=preview

Answer 1

Dort wird der updated and working plunker

ist ich das alles form Sachen an einem Ort (ist nun erstellt zB wo Form) und die damit verbundenen nur auf das Kind passieren würde definieren Gruppe

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: [''] 
    }); 
    } 
} 

Die Vorlage:

// 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> 
`}) 

Und Kind so sein würde:

// 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() {} 

} 

Überprüfen Sie es in Aktion here

HINWEIS: Ich würde beginnen die RC2 Welt

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

Answer 2

vergessen über ngControls zu beobachten 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> 

und

app.component.ts sollte verwenden:

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

statt:

[parentForm]="form"