Cómo agregar el nombre de control de formulario a los datos dinámicos

Soy nuevo en los formularios reactivos, por lo que tengo dificultades para vincular el nombre del control del formulario a los datos dinámicos, aquí estoy recibiendo datos del backend en dos tipos, una pregunta y otra son opciones. Las opciones serán botón de radio o área de texto.

Este es básicamente un formulario de comentarios, donde tiene un área de texto normal y la opción de radio y las opciones de radio son "pobres", "justas", "buenas" ... tienen que vincular la pregunta y las opciones al nombre del control del formulario.

Debajo está el código: -

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 = [];
  // data from the backend
  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 {}

Estoy agregando el nombre del control de formulario al tipo de radio, pero este es el error al que me enfrento: -

"Error ERROR: si define un nombre y un atributo formControlName en su botón de radio, sus valores deben coincidir. Ej:"

aquí solo quiero vincular un valor a la pregunta y las opciones y luego acceder a la identificación de la pregunta y al valor de esas opciones para enviar los datos al backend

Esta es la URL del código, para referencia

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

Por favor, ayúdame a encontrar la solución.

Respuestas a la pregunta(0)

Su respuesta a la pregunta