Question

我正在使用Angular2来创建一个Web应用程序。我有几个数据输入屏幕，用户必须输入邮政地址，这是公司或个人等实体的较大数据条目的一部分。

很自然地，我想创建一个可以作为子表单重用的地址表单组件，并以某种方式嵌入或包含在更大的表单中。这似乎应该是可能的，但我无法创建示例或查找和示例。我试图创建一个具有FormBuilder作为输入的子组件，但这不起作用。

对我来说问题是我似乎无法成功地传达封闭的＆lt;形式＆gt;标记到我的html模板。

有没有人知道这方法？

Answer 1

仅适用于＆lt; = Angular＆lt; = 2.0.0 RC

我不知道这是否是一个好方法，但似乎有效

@Component({
  selector: 'address-form',
  providers: [],
  styles: [':host {display: inline-block; border: 1px solid blue;}'],
  template: `

    <input [ngFormControl]="street">
    <input [ngFormControl]="zip">
  `,
  directives: []
})
export class AddressForm {
  street = new Control('', Validators.minLength(3));
  zip = new Control('', Validators.required);
  isSet:boolean;
  @Input() group;
  constructor() {}

  ngOnChanges() {
    setTimeout(()=> {
      this.group.control.addControl('street', this.street);
      this.group.control.addControl('zip', this.zip);
    });
  }
}

  <form #f="ngForm">
    <input ngControl="custId"> 
    <address-form ngControlGroup="address" #addrGroup="ngForm" [group]="addrGroup"></address-form>
  </form>

Plunker example

请参阅Kara与Plunker的评论https://github.com/angular/angular/issues/10251#issuecomment-238737954

如何使用AngularJS 2

1 个答案: