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>

这是调查中的数据。问题：

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

如果我选择选项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的控件，其值将根据用户选择的单选按钮而改变。< / p>

查看HTML，您可以创建两次formGroup：

首先通过表单构建器

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

然后立即通过直接实例化一个新的FormGroup

this.surveyForm = new FormGroup({});

这些方法中的任何一种都可以使用，但是你拥有它的方式，一旦你用第二种方法覆盖这个值，你就会浪费你通过第一种方法做的任何工作。

Answer 2

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

$ awk '/^Oscar/ && gsub(/^.*\[|\]/,"")' infile
191, 229, 115, 105, 0, 78, 154, 122, 210, 0

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

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

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

2 个答案: