以Angular 8反应形式选择错误答案时突出显示正确答案

时间:2019-10-30 00:02:02

标签: angular angular-reactive-forms

在选择了错误答案(红色突出显示)的同时,我需要一些帮助以绿色突出显示正确的答案并带有选中标记。请在下面查看我的表单的代码:

<form #quizForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <ol class="form-group">
    <mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)"
      (click)="question.selectedOption = option">
       <div class="radio-options" *ngFor="let option of question.options">
         <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
          [checked]="question.selectedOption == option"
          [ngClass]="{'is-correct': isCorrect(option.optionValue),
                      'is-incorrect': isIncorrect(option.optionValue)}">
          <li>{{ option.optionText }}</li>

          <mat-icon class="feedback-icon" *ngIf="isCorrect(option.optionValue)">done</mat-icon>
          <mat-icon class="feedback-icon" *ngIf="isIncorrect(option.optionValue)">clear</mat-icon>
        </mat-radio-button>


private buildForm() {
  this.formGroup = this.fb.group({
    answer: ['', Validators.required]
  });
}

radioChange(answer: number) {
  this.selectedOption = answer;
  // this.answer.emit(answer);
  this.displayExplanation();
}

isCorrect(option: number): boolean {
  return option === this.question.answer && this.selectedOption === option;
}

isIncorrect(option: number): boolean {
  return option !== this.question.answer && this.selectedOption === option;
}

编辑:尝试做这样的事情,不确定如何将其链接到我的模板,因为我已经在DOM元素上使用了ngClass :) ...

checkAnswer() {
  let radioElem = document.getElementById('mat-radio-btn');

  if (this.question.selectedOption === this.question.answer) {
    radioElem.classList.add('is-correct');
  } else {
    radioElem.classList.add('is-incorrect');
    if (radioElem.innerHTML === this.question.answer) {
      radioElem.classList.add('is-correct');
    }
  }
}

2 个答案:

答案 0 :(得分:1)

您需要做的就是将方法更改为在选择一个选项之前不做任何事情:

isCorrect(option: number): boolean {
  // mark the correct answer regardless of which option is selected once answered
  return !!this.selectedOption && option === this.question.answer;
}

isIncorrect(option: number): boolean {
  // mark incorrect answer if selected
  return option !== this.question.answer && this.selectedOption === option;
}

答案 1 :(得分:0)

我不确定如何在方法中编写代码。但我认为理想情况下,您的代码看起来像-

        <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
          [checked]="question.selectedOption == option"
          [ngClass]="{'is-correct': isCorrect(option.optionValue),
                      'is-incorrect': !isCorrect(option.optionValue)}">
          <li>{{ option.optionText }}</li>

          <mat-icon class="feedback-icon" *ngIf="isCorrect(option.optionValue)">done</mat-icon>
          <mat-icon class="feedback-icon" *ngIf="!isCorrect(option.optionValue)">clear</mat-icon>
        </mat-radio-button>

并且您的方法应类似于-

isCorrect(option: number): boolean {
  this.selectedOption = option;
  return option === this.question.answer
}

PS:如果已经添加了change事件,则无需添加点击处理程序。只需在变更处理程序中设置值,或者如果需要,也可以使用ngModel使用模型绑定。