Angular 如何在mat无线电组中使用表单控件？

编辑：

我很难让我的表格正常工作。表单控件行似乎在单选按钮行之间移动。你能帮我解决这个问题吗。我的代码如下：

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <h3 class="identifyQuestion">Question #{{ question.questionId }} of {{ numberOfQuestions }}</h3>
  <div class="question">{{ question.question }}</div>
  <div *ngFor="let option of question.options; let i = index">
    <div class="form-group">
      <ul class="answers-list">
        <li class="form-control answer"
          [style.backgroundColor]="selectedRadioButtonOption === question.correctAnswer
                                  && selectedRadioButtonOption === option.optionValue ? '#43e756': '#f5f5f5'">
           <mat-radio-group name="answer" formControlName="answer" (change)="radioChange($event.value)">
              <div class="answerChoice">
                 <mat-radio-button [disableRipple]="true" [value]="option.optionValue"></mat-radio-button>
                 <label class="answerLabel">{{ option.optionText }}</label>
              </div>
         </mat-radio-group>
        </li>
      </ul>
    </div>
 </div>
</form>

{{numberOfQuestions}的问题{{Question.questionId}}
{{question.question}}


{{option.optionText}

我不知道您到底想要什么，但我理解的是，您想要突出显示正确的答案。请检查stackblitz中的代码，并让我知道它是否满足您的目的

我所做的：

[style.backgroundColor]="formGroup.get('answer').value === question.correctAnswer && formGroup.get('answer').value === option.optionValue ? '#43e756': '#f5f5f5'">

说明：当formcontrol中的答案与正确答案匹配时，它将更改背景颜色

---

实时代码：

我尝试将formControlName=“answer”class=“form control”移动到带有类answerChoice的div，但现在我看不到标签文本。请您提出一个stackblitz问题，以便我们能够清楚地了解您的问题。我不明白容器/问题和组件/问题的含义。否，我需要它在没有单选按钮的情况下工作（我添加了CSS以删除单选按钮）。每个包含答案的框都应该是可点击的。现在的情况是，如果将鼠标悬停在回答框的顶部或底部，则该部分可以单击，但选项本身不能。整个矩形应该可以单击。另外，我需要它以红色背景色突出显示错误答案（最好旁边有一个x）和绿色背景色突出显示正确答案（旁边有一个绿色复选标记）。好吧，我想，我做了你想要的。请检查更新的链接。请告诉我是否有用好的，这看起来很接近我想要的。我真正想要的是，这一行也应该突出显示红色或绿色。谢谢你的帮助！你可以很容易做到，如果你做不到，如果你说，我可能会帮你。