如何遍歷Angular2中的formbuilder？

Question

我嘗試遍歷窗體控件，但遇到了一些問題。 我使用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>

但是這部分不起作用：

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

當我檢查{{ups.key}}的值時，即為“ database1”。 在這種情況下，“ database1”不是FormControlName嗎？

感謝幫助

Answer 1

您需要將formControlName屬性綁定到表達式：

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

注意[]環繞屬性。 一個好的開始是看一下本食譜：@kcp建議的動態表單