角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不能重複對象

回答

相關問題