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.