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

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

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

我创建了这个单独的

多值.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);
    }
}

---

已解决以前的错误。

表单控件按名称绑定。向输入控件添加

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>

键：
价值：

我建议您与父级一起处理formarray中formgroups的添加，只需将嵌套的formgroup传递给子级即可。我发现，除非您这样做，否则似乎会抛出错误。下面是您的一段简短代码，使用

FormBuilder

注入构造函数

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

ngOnInit（）{
this.newElementForm=this.fb.group({
多值形式：this.fb.group({
选项：this.fb.array（[]）
})
})
}

然后添加新控件：

addMultiValueControl（）{
让control=this.newElementForm.controls.multiValueForm.controls.options；
control.push（this.fb.group({
值：['']
}))
}

然后只需传递formGroup

多值表单

：

在child中输入，就像您有：

@Input（'group'））
多值形式：FormGroup

和您的子模板：

价值：

这里有一个

---

对于被动窗体，情况并非如此，formcontrolname就足够了。@AJT_82您如何删除此消息，然后

，原因是：找不到具有未指定名称属性的控件

？无法回答这一问题，更重要的是，当您试图在子窗体中操作模型驱动窗体的生成时，总是会引发一些错误。我也看过的所有教程，处理父对象中的所有内容，并将嵌套组传递给子对象，但这是一个有趣的问题，为什么会这样。希望有更聪明的人能回答这个问题：P在教程中也没有解释（现在不能提供任何直接链接，因为我没有将它们添加到书签中）。但无论如何，在模型驱动的表单中不需要name属性，这是一个事实。您的解释很好理解，示例非常有用。我发现我实际上缺少

，并且没有正确设置

formGroupName=“{{I}}”

。谢谢你的帮助，我把你的答案标记为正确。好的，太好了，谢谢！最重要的是你解决了你的问题。祝你有一个美好的一天和愉快的编码：）好吧，我用你的解决方案解决了它，实际上，用词来说就是：你解决了它。非常感谢。

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

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