以反应形式动态创建多个单选按钮组

问题描述

我正在研究调查表，其中的一部分由单选按钮组成。我面临的挑战是使用反应式（模型驱动）表单方法动态生成单独的单选按钮组。此外，我使用FormBuilder验证单选按钮，特别是使它们成为必需。

对于我要将其与特定formControl关联的每个单选按钮组，请参见下面的代码摘录。第一组单选按钮将转到“ radioAnswers-> radio1”。下一个单选按钮组将转到“ radioAnswers-> radio2”，依次类推。

surveyForm: FormGroup;
constructor(public fb: FormBuilder) {
    /*########### Form ###########*/
    this.surveyForm = this.fb.group({
      radioAnswers: this.fb.group({
        radio1: ["",[Validators.required]],radio2: [""],radio3: [""],radio4: [""]
      })
    });
  }

我从以下数据集中提取问题和答案选择：

export const movieQuestions: any = [
  {
    question: {
      title: "What is your favorite genre of movies?",answers: [
        "Action","Sci-fi","Comedy","Horror"
      ]
    }
  },{
    question: {
      title: "What is your favorite to-go snack?",answers: [
        "Popcorn","Chocolate","Pizza"
      ]
    }
  },];

我用单选按钮代码创建了一个StackBlitz。

这些是我在SO上阅读过的有关此问题的其他帖子的示例，这些示例没有帮助：

• Dynamically Creating Radio Button using a Radio Button Component
• Dynamically Create Radio Buttons based on a dynamic form

那么，如何使用Angular 10中的反应形式动态生成单选按钮组？ 任何指导，技巧或建议都将受到高度赞赏！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）