以角度循环单选按钮formControl的正确方法是什么？答案

【问题标题】：What is the proper way to loop radio button formControl in angular?以角度循环单选按钮formControl的正确方法是什么？
【发布时间】：2020-02-12 18:48:55
【问题描述】：

我获取了一个问卷 API，其中包含一系列问题，并且在每个问题中我都有一系列选择。这是一个json的例子：

{ questions: 
       [ 
          {
             question: "", 
             choices: 
                [ 
                   { 
                      choice: "A", 
                      selected: false 
                    } 
                 ] 
           } 
       ]
}

对于这个例子，我使用的是 ReactiveForms。

以下是我如何构建 FormGroup 的基本结构。这将根据我从 API 收到的数据量来填充。

this.questionnaire = this.formbuilder.group({
     question: this.formbuilder.array([
        this.formbuilder.group({
           question: "data_from_api"
           choices: this.formbuilder.array([
              this.formbuilder.group({
                 choice: "data_from_api",
                 selected: false
              })
           ])
        })
     ])
});

我对此的逻辑是循环每个问题控件，然后循环问题内的每个选项控件。我面临的问题是，当我循环选择控件数组时，单选按钮没有分组，因此它允许用户选择问题中的所有选项。

这是我如何拥有我的 HTML。

<form [formGroup]="questionnaire">
  <div formArrayName="questions">
    <div *ngFor="let question of questionnaire.get('questions').controls; let i = index" [formGroup]="question">
      {{ question.get('question').value }}
      <div formArrayName="choices">
        <div *ngFor="let choice of questions.get('choices').controls; let j = index" [formGroup]="choice">
         <label>
           <input formControlName="selected" type="radio" [value]="true || false">
           {{ choice.get('choice').value }}
         </label>
        </div>
      </div>
    </div>
  </div>
</form>

如果单选按钮（选项）被选中，那么 formControlName="selected" 将保存为 true。我可以毫无问题地显示，当我使用复选框时它可以找到。

我尝试添加“名称”属性，但不起作用，因为您只能拥有具有相同值的“formControlName”和“名称”，在这种情况下您不希望这样做，因为这会将所有现有的单选按钮。

假设我无法更改 json，我该如何解决这个问题？您能否向我推荐一些选项或指向类似示例的链接。提前谢谢！

【问题讨论】：

标签： angular angular-reactive-forms formbuilder

【解决方案1】：

如果我的理解正确，您需要使用 i 并将其与您选择的自定义名称连接起来，比如说 <input formControlName="selected" [attr.name]="'choice-group-' + i" type="radio" [value]="true || false">，这样会为每个问题创建独立的组。

【讨论】：