typescript - Angular 6 Dynamic Forms issue [part 2]

Question

Following recommendations from Angular 6 Dynamic Forms issue I've made my app to print one field out, but only one empty and with an error

ERROR Error: Cannot find control with name: 'field0'

I've placed my code here https://stackblitz.com/edit/angular-mzu1ab

I'm generating field names by indices, since the data that I fetch contains no name fields.

Answer 1

This happens because you create your form control names dynamically, but you don't really bind them to your questions.

Instead of chosing an arbitrary name like field + i, you should instead bind on a specific value.

In this stackblitz, I binded the form control names to the label, and as you can see, it works like a charm.

<input [formControlName]="question.label"

questsions.forEach((e, i) => {
  if (e.type === 'string' || e.type === 'text' || e.type === 'list') {
    group[e.label] = new FormControl(e.value, Validators.required);