在 angular 中循环单选按钮 formControl 的正确方法是什么？

Question

我获取了一份调查问卷 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
              })
           ])
        })
     ])
});

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

这是我的 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>

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

我尝试添加一个 "name" 属性，但没有用，因为你只能有一个 "formControlName" 和 "name" 具有相同的值，在这种情况下你不会想要那个，因为它将对所有现有的单选按钮进行分组。

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

Answer 1

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

在 angular 中循环单选按钮 formControl 的正确方法是什么？

What is the proper way to loop radio button formControl in angular?

formbuilder

angular

angular-reactive-forms