如何在Angular 4中动态创建formControlName?

时间:2018-03-24 04:31:40

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

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

  

CONTROLER CODE

November

所以我想 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: ['']
  });
}

2 个答案:

答案 0 :(得分:2)

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

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

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

<强> Ng-run Example

你应该知道,如果打字稿有目标es5,那么它将被转移到类似的东西:

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

所以这是你的第二个选择

答案 1 :(得分:1)

请尝试以下代码。它确实有效!

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