forms - 迭代动态嵌套表单控件 Angular 2

Question

我有以下结构，并希望在我的 HTML 模板中相应地显示选项。

{
  "values": {
    "defaultValue": "something",
    "options": {
      "0": {
        "key": "Foo",
        "value": "Hotel"
      },
      "1": {
        "key": "Bar",
        "value": "foz"
      },
      "2": {
        "key": "appel",
        "value": "kaas"
      }
    }
  }
}

我创建了这个单独的 MultiValue.component.ts:

import {Component, Input} from "@angular/core";
import {FormGroup, FormArray, FormControl, Validators} from "@angular/forms";

@Component({
    selector: 'multi-value',
    templateUrl: 'multi-value.component.html'
})
export class MultiValueComponent {
    @Input('group')
    public multiValueForm: FormGroup;

    protected addMultiValueControl(): void {
        let options = <FormArray>this.multiValueForm.controls['options'];
        let option = new FormGroup({
            'key': new FormControl('', [<any>Validators.required]),
            'value': new FormControl('', [<any>Validators.required])
        });
        options.push(option);
    }
}

我的模板如下:

<div class="form" [formGroup]="multiValueForm">
    <div *ngFor="let option of multiValueForm.controls.options.controls; let i=index">
        <div class="form-group" [formGroupName]="i">
            <h1 class="control-label">Index: {{ i + 1 }}</h1>
            <label>Key: <input type="text" class="form-control" formControlName="key"></label>
            <label>Value: <input type="text" class="form-control" formControlName="value"></label>
        </div>
    </div>
</div>

我通过引用我的表单来调用该组件，如下所示:

<multi-value [group]="newElementForm.controls.values"></multi-value>

当我在 MultiValueComponent 内部进行调试时，我可以确认 public multiValueForm: FormGroup; 确实包含 FormArray 选项。

现在我在我的模板中尝试了很多不同的设置，但事实是我似乎无法让它工作。所有文档都说明这应该可行，但我不知道为什么不行。

我现在得到的错误是:

EXCEPTION: Error in ./MultiValueComponent class MultiValueComponent - inline template:2:32 caused by: Cannot find control with unspecified name attribute

以前的错误已解决。

Answer 1

我建议您与父级处理在您的 formarray 中添加表单组，然后将嵌套的表单组传递给子级，这样就可以了。我发现除非你这样做，否则似乎会抛出错误。这是您的一段简短代码，使用 FormBuilder 注入(inject)到构造函数中。

因此在您的父级中，表单的构建应如下所示:

ngOnInit() {
  this.newElementForm = this.fb.group({
    multiValueForm: this.fb.group({
      options: this.fb.array([])
    })
  })
}

然后添加一个新的控件:

addMultiValueControl() {
  let control = <FormArray>this.newElementForm.controls.multiValueForm.controls.options;
  control.push(this.fb.group({
    value: ['']
  }))
}

然后只需传递 formGroup multiValueForm:

<multi-value [group]="newElementForm.controls.multiValueForm"></multi-value>

输入child，就像你有:

@Input('group')
multiValueForm: FormGroup

和您的子模板:

<div [formGroup]="multiValueForm">
  <div formArrayName="options">
  <div *ngFor="let group of multiValueForm.controls.options.controls; let i=index">
    <div formGroupName= {{i}}>
      <label>Value: </label>
      <input formControlName="value">
    </div>
  </div>
  </div>
</div>

这是一个

Demo