Javascript 如何在Angular2中迭代formbuilder？

我试图迭代表单控件，但遇到了一些问题。我使用Angular2的FormBuilder

我的控制器中有以下代码：

ngOnInit() {
    let data = this.dataSet[this.key];
    this.form = this._fb.group({});

    Object.keys(data).forEach(name => {
      this.form.addControl(name, new FormControl());
      this.form.controls[name].setValue(data[name]);
    });

    console.log(this.form);
  }

在控制台上提供以下输出：

FormGroup
  ...
  controls: Object
    database1: FormControl
      ...
      _value: Object
      accessHost: "some host here"
      accessKey: "the key here"
....
    database2: FormControl
      ...
      _value: Object
      accessHost: "some host here"
      accessKey: "the key here"

到目前为止看起来还可以。 html代码：

<form [formGroup]="form" (ngSubmit)="onSave(form)">
  <div *ngFor="let ups of form.controls | keyVal; let i=index">
  {{ups.key}}
    <div class="form-group">
      <input class="form-control" formControlName="{{ups.key}}">
    </div>
  </div>
</form>

{{ups.key}}

但这部分不起作用：

<input class="form-control" formControlName="{{ups.key}}">

当我检查{ups.key}}的值时，这就是“database1”。本例中的“database1”不是FormControlName吗

---

感谢您的帮助

您需要将formControlName属性绑定到表达式：

<input class="form-control" [formControlName]="ups.key" />

请注意属性周围的[]。

---

一个好的开始就是看看这本食谱：正如@kcp所建议的那样，看看这个谢谢你的提示，我知道这本食谱。他们谈论动态形式。我改为expression并在字段中获取“[object]”。这是因为该值是一个复杂的对象。看看你的控制台输出，_值是Object。我知道，这是一个误解。我将把控件“database1”设置为输入而不是_值。“database1”不是FormControl对象。