Question

请有人帮助我了解控制组的工作原理。我正在尝试做这样的事情

app.component.ts：

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即可，但我无法访问嵌套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

注意：我会开始观察RC2世界

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

Answer 2

忘记了ngControls 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"

Angular2 rc1：如何使用嵌套的ControlGroups？

2 个答案: