CODEWITHSUNDEEP
angularangular-material
integral100x
integral100x

Reputation: 342

How to use form-control with mat-radio-group?

EDIT: stackblitz.com/edit/angular-3g8bxf

I'm having some difficulty getting my form to work properly. It seems that the form control rows are mousing over in between the radio button rows. Please can you help me to fix this problem. My code is as follows:

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

Upvotes: 0

Views: 916

Answers (1)

Md Rafee
Md Rafee

Reputation: 5530

I don't know what you want exactly, but what I understood, you want to highlight the correct answer. Please check the code in the stackblitz and let me know if it fulfils your purpose.

What I have done:

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

Explanation: When the answer in the formcontrol matches with the correct answer, it will change the background color

Live Code: Stackblitz

Upvotes: 1

Related Questions