Question

我在使表格正常工作方面遇到了一些困难。似乎表单控件行在单选按钮行之间移动。请您能帮我解决这个问题。我的代码如下：

<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>

Answer 1

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

我做了什么：

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

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

实时代码：Stackblitz

如何在mat-radio-group中使用表格控制？

1 个答案: