Question

我从API那里收到了一系列问题。每个问题都有问题ID。如何将问题ID动态绑定到formControlName？

Answer 1

您可以在模板中使用ngFor并绑定动态formControlName。

模板：

 <form [formGroup]="formGroup">
  ...
  <ul>
    <li *ngFor="let question of questions">
      <input [formControlName]="questions.id">
    </li>
  </ul>
  ...
</form>

组件：

const questions = [{id: 1}, {id: 2}]; // just for demo
this.formGroup = this.fb.group(
  questions.reduce((acc, curr) => ({ ...acc, [curr.id]: '' }), {})
);

这将基于以下对象生成formGroup：{1: "", 2: "", 3: ""}。如果需要，还可以为表单控件设置初始值：

const questions = [{id: 1, value: 'q1'}, {id: 2, value: 'q2'}]; // just for demo
this.formGroup = this.fb.group(
  questions.reduce((acc, curr) => ({ ...acc, [curr.id]: curr.value }), {})
);

如何在angular 6中动态添加FormControl

1 个答案: