Angular2 不支持表单中的嵌套属性

Question

在 Angular2 中支持嵌套字段的任何方式。

Class

ngOnInit() {
 this.form = this._fb.group({

  name: {
    given: ['', Validators.required],
    middle: [''],
    family: ['', Validators.required]
  }

 });
}

模板

<form [ngFormModel]="form">

<input ngControl="name.given" type="text" placeholder="First Name">
<input ngControl="name.middle" type="text" placeholder="Middle Name">
<input ngControl="name.family" type="text" placeholder="Last Name">

</form>

我在控制台中收到以下 Cannot find control 'name.given' 错误输出。我已经针对 ngControl 尝试了一些其他语法 name['given']、name[given] 等，但得到了同样的错误。

如何在 angular2 中使用嵌套字段？

Answer 1

您修复内联表单（使用 ngControl）和程序化表单使用 FormBuilder - 在这种情况下，您需要使用 ngFormControl).

我认为您正在寻找表单组。这是一个示例：

<div ngControlGroup="name" #cgName="ngForm">
  <p>First: <input ngControl="give" required></p>
  <p>Middle: <input ngControl="middle"></p>
  <p>Last: <input ngControl="family" required></p>
</div>

看到这个 plunkr：https://plnkr.co/edit/M4FGTNAx8lo8jzBivH0P?p=preview。

Angular2 不支持表单中的嵌套属性

Angular2 doesnot support nested properties in form

angular2-forms

angular2-template

angular