How to create formControlName dynamically in Angular 4?

Question

I want to create formControlName dynamically, here is my code in component,

CONTROLER CODE

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: ['']
  });
}

So I want formControlName Like this,

is_answer_0
is_answer_1
is_answer_2

yurzui · Accepted Answer · 2018-03-24 04:52:41Z

4

In es6 objects can be created with computed keys. So let's use it:

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

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

Ng-run Example

You should be aware that if typescript has target es5 then it will be tranpiled to something like:

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

So it's your second option to go

answered Mar 24, 2018 at 4:52

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yurzui · Accepted Answer · 2018-03-24 04:57:34Z

2

Try code below. It certainly works !

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

edited Mar 24, 2018 at 4:57

yurzui

215k32 gold badges450 silver badges413 bronze badges

answered Mar 24, 2018 at 4:57

Biju Maharjan

4473 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to create formControlName dynamically in Angular 4?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related