如何在 Angular 4 中动态创建 formControlName？答案

【问题标题】：How to create formControlName dynamically in Angular 4?如何在 Angular 4 中动态创建 formControlName？
【发布时间】：2018-09-02 19:31:41
【问题描述】：

我想动态创建 formControlName，这是我在组件中的代码，

控制器代码

ngOnInit() {
  this.rForm = this.fb.group({
     question_type_id: this.fb.array([]),
  });

  for (let i = 0; i < this.getQuestionsType.length; i++) {
     const control = <FormArray>this.rForm.controls['question_type_id'];
     control.push(this.initAddress(i));
  }
}

initAddress(i) {
  var ans = "is_answer_"+i;

  return this.fb.group({
    ans: ['']
  });
}

所以我想要formControlName这样，

is_answer_0
is_answer_1
is_answer_2

【问题讨论】：

标签： angular angular-reactive-forms angular-controller formarray

【解决方案1】：

在 es6 中可以使用computed keys 创建对象。所以让我们使用它：

initAddress(i) {
  var ans = "is_answer_" + i;

  return this.fb.group({
    [ans]: ['']
    ^^^^^
  });
}

Ng-run Example

您应该知道，如果 typescript 的目标是 es5，那么它将被转换为类似的内容：

var controlConfig = {};
controlConfig[ans] = [''];

所以这是你的第二个选择

【讨论】：

【解决方案2】：

试试下面的代码。它确实有效！

ngOnInit() {
  for(var i = 0; i < this.getQuestionsType.length; i++) {
    <FormArray>this.rForm.get('question_type_id').push(new FormControl("is_answer_"+i));
  }
}

【讨论】：