无法在angular2中将单选按钮与带有反应形式的formcontrol绑定

Question

我的想法是在 Web 组件上动态添加问题，这是我所做的：

用于构建 FormGroup 的函数：

createForm(data) {
    this.survey = JSON.parse(data['_body']);
    // generate Form control
    this.surveyForm = new FormGroup({});
    for ( const question of this.survey.questions) {
        const fcName = 'q' + this.survey.questions.indexOf(question);
        const fc = new FormControl('');
        this.surveyForm.addControl(fcName, fc);
    }
    console.log(this.surveyForm.controls);
}

这是我的模板文件：

<div *ngIf="survey">
<form [formGroup]="surveyForm">
  <h1>{{survey.title}}</h1>
  <div *ngFor="let question of survey.questions; let i=index">
    <h3>{{question.content}}</h3>
    <div *ngFor="let option of question.options">
      <input
        [type]=question.optionType
        formControlName='q{{i}}'
        [value]="option"
        name="q{{i}}" />

      <label>{{option}}</label>
    </div>
  </div>
  <button (click)="onSubmit()">Submit</button>
  <button type="reset">Reset</button>
</form>
</div>

这是survey.questions中的数据：

    questions:[
     {
      "content":"What is Your Name??",
      "optionType":"Radio",
      "options":["Robin","Rainer","ABBY"]
     },
     {
      "content":"Do you Know me?",
      "optionType":"Checkbox",
      "options":["yes"]
     }]

这是我的期望，如果我 select 选项 ABBY 并记录 this.surveyForm.getRawValue():

    {
     q0: 'ABBY',
     q1: ''
    }

这就是我得到的：

    {
     q0: '',
     q1: ''
    }

console.log 提供我最初设置的数据。

我是不是做错了什么？非常感谢帮助。谢谢。

Answer 1

进行单选按钮输入时，所有输入都应引用相同的 formGroupName。也就是说，如果您的 formGroupName 是 myRadioButton，您的模板将如下所示：

<input type="radio" formControlName="myRadioButton" [value]="valueOne">
<input type="radio" formControlName="myRadioButton" [value]="valueTwo">

此外，这也意味着您的 formGroup 将只需要一个表单控件，即 myRadioButton 的控件，其值将根据哪个单选按钮而改变用户选择。

查看您的 HTML，您创建了两次 formGroup：

首先通过表单生成器

this.surveyForm = this.fb.group({});

然后直接实例化一个新的FormGroup

this.surveyForm = new FormGroup({});

这两种方法中的任何一种都可以工作，但是按照你的方式，一旦你用第二种方法覆盖了值，你就在浪费你通过第一种方法所做的任何工作。

Answer 2

好的，我想我们不能对输入类型使用通配符：

<input
    [type]=question.optionType
    formControlName='q{{i}}'
    [value]="option"
    name="q{{i}}" 
/>

所以我不得不为每个选项类型定义输入标签：

<div  *ngIf="question.optionType === 'Radio'">
  <div *ngFor="let option of question.options">
    <input
        type='radio'
        [formControlName]='i'
        [value]="option"
        [name]="i"
        />
    <label>{{option}}</label>
  </div>
</div>
<div *ngIf="question.optionType === 'Checkbox'">
  <div *ngFor="let control of surveyForm.controls[''+i].controls; let j=index">
    <input
          type='checkbox'
          [formControl]='control'
          [value]="question.options[j]"

    />{{question.options[j]}}
  </div>
</div>

无法在angular2中将单选按钮与带有反应形式的formcontrol绑定

unable to bind Radio buttons with formcontrol with reactive forms in angular2

radio-button

angular

angular-reactive-forms