Question

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

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

如果我尝试选择一个值“ good”，那么所有按钮的值都将选择为“ 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>

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

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

这是必需的数组

数组[{ 值：“好” QuestionId：20 }]

Answer 1

您的formControlName在ngfor内部。每个索引都具有相同的名称，这就是为什么每个索引中的值都更改的原因。您需要创建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名称

     <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绑定到静态单选按钮值

1 个答案: