角2表单生成器嵌套JSON不能重复对象

我的json，看起来像这样：角2表单生成器嵌套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.我发现的例子大多是嵌套一个字符串数组。如何使用带有嵌套对象的表单生成器？

来源

2016-11-29 Early73

你在哪里收到JSON，你为什么认为你的控件反映了所说的JSON？ – silentsod

原来我需要有对于阵列中的每个对象在适当位置的控制。我不得不向他们这样的循环加：

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);

BAM！

来源

2016-11-30 20:05:20 Early73

角2表单生成器嵌套JSON不能重复对象

回答

相关问题