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

Question

我正在研究调查表，其中的一部分由单选按钮组成。我面临的挑战是使用反应式（模型驱动）表单方法动态生成单独的单选按钮组。此外，我使用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中的反应形式动态生成单选按钮组？ 任何指导，技巧或建议都将受到高度赞赏！