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

BAM！

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

1 个答案: