如何将 formControlName 绑定到静态单选按钮值

Question

我是反应式表单的新手，我在这里尝试将表单控件名称绑定到静态单选按钮，但单选按钮取决于循环，它根据循环次数不断重复。

当我将单选按钮绑定到表单控件名称时，这就是我面临的问题

如果我尝试 select 一个值 "good" 那么所有按钮都 select 值 "good"

以上问题的代码如下：-

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>

在这里，当我将值绑定到表单控件名称时，所有单选按钮都被select编辑为该特定值

如何将单选按钮的值以及该问题的 ID 发送到 ipdFeedback 函数。

这是必需的数组

数组[{ 值："good" 问题编号：20 }]

Answer 1

您的 formControlName 在 ngfor 中。每个 index.That 的值都相同，这就是为什么每个 Index.You 的值都更改需要创建 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);
        }         
       }

像下面这样更改您的 html； ngfor 用于反应形式数组并添加 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>

您将获得 this.ipdFormArray.value

中的值

如何将 formControlName 绑定到静态单选按钮值

How to bind the formControlName to static radio-button value

angular-reactive-forms