Angular Material buttons won't work when inside mat-radio-group

I have a quiz application that displays multiple questions along with their respective answers. I am wanting to make it so each question has its own unique set of radio checkboxes so that I can easily bind that to a "Selected" property of an answer. When I try to do this it will let me select one radio button but then the other ones glitch out. Video of problem. This seems to only happen when I put them inside of a mat-radio-group but I thought I had to use one to get different sets of radio buttons.

<!--start of exam -->

 

<mat-step [stepControl]="examForm">

  <ng-template matStepLabel>

    <span *ngIf="worksheetComplete"><span *ngIf="programLocked">Edit&nbsp;</span>Exam</span>

    <span *ngIf="!worksheetComplete" class="text-red-400"><span *ngIf="programLocked">Edit&nbsp;</span>Exam (Incomplete)</span>

  </ng-template>

 

  <div  *ngIf="examAttemptMap.passing" fxLayout="column" fxLayoutGap="24px">

    <span *ngIf="sharedService.tablet" class="f-s-18">Exam</span>

    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="24px">

      <span fxFlex="70" class="f-s-20">You have already passed the exam. Please continue through the application.</span>

    </div>

    </div>

 

  <div  *ngIf="!examAttemptMap.passing" fxLayout="column" fxLayoutGap="24px">

    <span *ngIf="sharedService.tablet" class="f-s-18">Exam</span>

    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="24px">

      <span fxFlex="70" class="f-s-20">Please answer the following questions. You may attempt this as many times as you would like.

      </span>

    </div>

    <mat-radio-group formControlName="{{question.text}}" *ngFor="let question of examAttemptMap.questions; let elementIndex = index">

    <!--Questions-->

    <div fxLayout="column" fxFlex="100" >

      <!--Core Elements-->

      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="8px" fxLayoutAlign="start center" fxLayoutAlign.lt-md="" style="padding-bottom: 1%" >

        <span><strong>({{elementIndex + 1}})</strong></span>

        <span>{{question.text}}</span>

 

      </div>

      <!--Answers-->

      <div fxLayout="row">

        <span fxFlex="5"></span>

        <div fxLayout="column" fxFlex="80">

          <div fxLayout="column" *ngFor="let answer of question.examAnswers; let subSectionIndex = index" fxLayoutGap="8px">

            <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="8px" fxLayoutAlign="start center" fxLayoutAlign.lt-md="">

              <mat-radio-button value="true"></mat-radio-button>

            <mat-card [ngStyle]="{'background-color':(answer.selected == true) ? '#53a66c' : '#00559525' }" (click)="highlightCard(answer, question.examAnswers)" [id]="answer.selected" class="card" >

              <span ><strong>({{getIndexLetter(subSectionIndex, false)}})</strong></span>

              <span  style="padding-left: 1%">{{answer.text}}</span>

 

            </mat-card>

            </div>

          </div>

        </div>

      </div>

    </div>

  </mat-radio-group>

  </div>

Angular Material buttons won't work when inside mat-radio-group

0 Answers