How to bind the formControlName to static radio-button value

Question

I am new to the reactive forms, here I am trying to bind the form control name to the static radio button, but radio button depends on the loop where it keeps repeating based on the number of loops.

When I bind the radio button to the form control name then this is the issue I am facing

If i try to select the one value "good" then all button are selected with value "good"

Here is the code for the above issue:-

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" : "question 1",
        "options": "radio"
    },
    {
        "id": 20,
        "question" : "question 2",
        "options": "radio"
    },
   
    {
        "id": 33,
        "question" : "question 3",
        "options": "text"
    },
    {
        "id": 34,
        "question" : "question 4",
        "options": "text"
    },
    ]
  }
  constructor(
    private fb: FormBuilder,
  ) {}
  ngOnInit() {
    this.getIpdFormData();
    this.filterDefaultValues();
  }
  getIpdFormData() {
    this.IpdData = this.response.data;
  }
  filterDefaultValues() {
    this.ipdForm = this.fb.group({
      ratingForm: [''],
      question: [],
    });
  }
  ipdFeedback() {

  }

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" formControlName="ratingForm" type="radio"  value="Poor" />
            <span class="radio-text">Poor</span>
          </label>
    <label class="radio-inline custom-radio">
            <input class="radio-text" formControlName="ratingForm" type="radio"  value="Fair"   />
            <span class="radio-text">Fair</span>
          </label>
    <label class="radio-inline custom-radio">
            <input class="radio-text" formControlName="ratingForm" type="radio"   value="Good"  />
            <span class="radio-text">Good </span>
          </label>
  </div>
  </div>
  <div *ngIf="d.options == 'text'">
    <textarea placeholder="Comments" formControlName="ratingForm" type="text" class="form-control" tabindex="14"></textarea>
  </div>
  </label>
  </div>
  <button type="submit"></button>
</form>

here when I bind the value to form control name then all radio button is selected for that particular value

How to send the value of radio button and also id of that question to the ipdFeedback function.

This is required array

array [{ value : "good" questionId : 20 }]

Answer 1

Your formControlName is inside a ngfor. It is same name for every index.That is why the value changed in every Index.You need to create FormArray.

 ngOnInit() {
         this.ipdForm = this.fb.group({
          IpdData: this.fb.array([]) 
       })
     }

     get ipdFormArray() {
       return this.ipdForm.get('IpdData') as FormArray;
    }

         filterDefaultValues() {
       for (let i = 0; i < this.IpdData.length; i++) {
            const datas =  this.fb.group({
                 ratingForm: [''],
                 question: [IpdData[i].question],
                 });
      this.ipdFormArray.push(datas);
        }         
       }

change your html like below; ngfor for reacctive form array and add formarray name

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

You will get the values in this.ipdFormArray.value