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和该选项的值以将数据发送到后端

这是代码的URL，仅供参考

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

将动态值绑定到angular中的formcontrolname

2 个答案: