Angular 2 表单生成器嵌套 json 无法迭代对象

Question

我有 json 看起来像这样：

{
"name": "", 
"effective_date": null, 
"expiry_date": null, 
"id": 1, 
"contacts": [
{
  "id": 1
}, 
{
  "id": 2
}, 
{
  "id": 4
}, 
{
  "id": 5
}
]}

我正在尝试使用它来填充表单。

这是我的控件：

        this.form = fb.group({
        'name': [''],
        'effective_date': [''],
        'expiry_date': [''],
        'id': [''],
        'contacts': fb.array([
          fb.group({
   'id': ['']
   })
   ])}]

然后在我的模板中，我尝试像这样遍历联系人：

  <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
   ...
    <div formArrayName="contacts">
      <div *ngFor="let contact of form.controls.contacts.controls; let i=index">

          <div [formGroupName]="i">
              <div>
              <label>Contact ID</label>
              <input type="text" class="form-control" [(ngModel)]="contacts" formControlName="id" placeholder="">
              </div>
          </div>
      </div>
  </div>
...

我确实在屏幕上输入了联系人 ID，但只有 1，我在控制台中收到错误无法在索引 1 处找到表单控件。另外，如果我查看 form.controls.contacts.controls.length，我会得到 1，并且不是 4. 我发现的示例主要是嵌套字符串数组。如何将表单生成器与嵌套对象一起使用？

Answer 1

原来我需要为数组中的每个对象准备一个控件。我只需要用这样的循环添加它们：

  for (let entry of this.myJson.contacts) {
  const control = <FormArray>this.form.controls['contacts'];
  control.push(this.initContacts());
  }

  initContacts() {
    // initialize our contact
    return this._fb.group({
        id: ['']
    });
   }

在我设置表单数据之前

this.form.setValue(this.myJson);

砰！

Angular 2 表单生成器嵌套 json 无法迭代对象

Angular 2 form builder nested json can't iterate the object

json

nested

formbuilder

angular