Question

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

{
  "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中使用父元素添加formgroups，然后将嵌套的formgroup传递给child并使用它。我发现除非你这样做，否则似乎会抛出错误。这是您的缩短代码，使用FormBuilder在构造函数中注入。

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

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>

输入孩子，就像你有：

@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

Answer 2

表单控件按名称绑定。将name属性添加到输入控件。

<label>Key: <input type="text" class="form-control" formControlName="key" name="key"></label>
<label>Value: <input type="text" class="form-control" formControlName="value" name="value"></label>

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

2 个答案:

Demo