Binding dynamic value to formcontrolname in angular

Question

I am new to reactive forms so I am facing difficulty in binding the form control name to the dynamic data, here I am receiving data from the back end in two types one questions and another is options. Options will either be radio button or text-area.

This is basically a feedback form, where it has a normal text area and radio option and radio options are "poor", "fair", "good". i have to bind formcontrolname with these options

Below is the code:-

feedback.component.ts

import {
  Component
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [FormBuilder]

})
export class AppComponent {
  name = 'Angular';
  ipdForm: FormGroup;
  IpdData = [];
  response = {
    "data": [{
        "id": 19,
        "question": "Cleanliness of the ward.",
        "options": "radio"
      },
      {
        "id": 20,
        "question": "Cleanliness of bathrooms & toilets.",
        "options": "radio"
      },

      {
        "id": 33,
        "question": "What made you come to this hospital for treatment?",
        "options": "text"
      },
      {
        "id": 34,
        "question": "Your valuable suggestions.",
        "options": "text"
      },

    ]
  }
  constructor(
    private fb: FormBuilder,
  ) {}

  ngOnInit() {
    this.getIpdFormData();
  }

  getIpdFormData() {
    this.IpdData = this.response.data;
  }
  filterDefaultValues() {
    this.ipdForm = this.fb.group({
      ratingForm: [''],
      question: [],
    });
  }
  ipdFeedback() {

  }
}

feedback.component.html

<form class="custom-form" [formGroup]="ipdForm" (submit)="ipdFeedback();">
  <div class="form-group" *ngFor="let d of IpdData;let i = index">
    <label for="dob" class="control-label">
        {{d.question }}
        <sup class="custom-required">*</sup>
      </label>
    <label class="radio-inline custom-radio">
        <div *ngIf="d.options == 'radio'">
            <div>
              <label class="radio-inline custom-radio">
                <input class="radio-text" type="radio"  value="Poor" formControlName="ratingForm" [name]="'ques_'+i" />
                <span class="radio-text">Poor</span>
              </label>
    <label class="radio-inline custom-radio">
                <input class="radio-text" type="radio"  value="Fair" formControlName="ratingForm" [name]="'ques_'+i" />
                <span class="radio-text">Fair</span>
              </label>
    <label class="radio-inline custom-radio">
                <input class="radio-text" type="radio"  formControlName="ratingForm" value="Good" [name]="'ques_'+i" />
                <span class="radio-text">Good </span>
              </label>
  </div>
  </div>
  <div *ngIf="d.options == 'text'">
    <textarea placeholder="Comments" type="text" class="form-control" tabindex="14"></textarea>
  </div>
  </label>
  </div>
  <button type="submit"></button>
</form>

app.module.ts

import {
  NgModule
} from '@angular/core';
import {
  BrowserModule
} from '@angular/platform-browser';
import {
  FormsModule,
  ReactiveFormsModule
} from '@angular/forms';

import {
  AppComponent
} from './app.component';
import {
  HelloComponent
} from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

I am adding form control name to radio type but this the error I am facing:-

"ERROR Error: If you define both a name and a formControlName attribute on your radio button, their values must match. Ex: "

here I just wanna bind a value to the question and the options and then access the question id and value of that options to send the data to the backend

This is URL for the code, for reference

https://stackblitz.com/edit/angular-uwx2ns?file=src%2Fapp%2Fapp.component.ts

Please help me to find the solution.

Gérard COLLIN Gérard COLLIN · Accepted Answer · 2019-08-31T09:00:09

If you use a formControlName (reactive form), you shouldn't use form name attribute (non-reactive form). However I don't know how to dynamically set the formControlName value.

In your case, you may want to use the FormArray: https://angular.io/api/forms/FormArray

Binding dynamic value to formcontrolname in angular

2 Answers