以角度将动态值绑定到formcontrolname

Question

我是响应式表单的新手，因此在将表单控件名称绑定到动态数据时遇到困难，这里我从后端接收两种类型的数据，一种是问题，另一种是选项。选项将是单选按钮或文本区域。

这基本上是一个反馈表，它有一个普通的文本区域和单选选项，单选选项是“差”、“一般”、“好”。我必须用这些选项绑定 formcontrolname

下面是代码：-

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 = [];
  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 {}

我正在向收音机类型添加表单控件名称，但这是我面临的错误：-

“错误错误：如果您在单选按钮上同时定义了名称和 formControlName 属性，它们的值必须匹配。例如：“

这里我只想为问题和选项绑定一个值，然后访问该选项的问题 ID 和值以将数据发送到后端

这是代码的网址，供参考

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

请帮我找出解决办法。

Answer 1

如果您使用 formControlName（反应式表单），则不应使用表单名称属性（非反应式表单）。 但是我不知道如何动态设置 formControlName 值。

在您的情况下，您可能希望使用 FormArray： https://angular.io/api/forms/FormArray

Answer 2

使用这种格式将动态值绑定到formControlname

<div *ngFor="let data of datas; let i=index">
 <div class="form-group">
   <label>Interest Percent</label>
  <input type="text" formControlName="{{data}}" class="form-control">
</div>
</div