Question

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

这基本上是一个反馈表单，它具有正常的文本区域和单选选项，单选选项为“差”，“一般”，“好” ..必须将问题和选项绑定到表单控件名称。

下面是代码：-

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 {}

我正在将表单控件名称添加到单选类型，但这是我面临的错误：-

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

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

这是代码的URL，仅供参考

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

请帮助我找到解决方法。

如何向动态数据添加表单控件名称

0 个答案: