Sunday 25 October 2020

Angular: How to make Mat-Slide-Toggle to work as radio button?

I have a dynamic form with 1 input field and 1 mat-slide-toggle. What I want is that suppose if the form fetches 4 mat-slide-toggle then if I set any one of the toggles true then the others will automatically be false.

HTML

<h3>Options & Answers</h3>
<div formArrayName="options">
  <ul *ngFor="let o of updateQuestionForm.get('options')['controls']; let i = index;" [formGroupName]="i"
    style="list-style: none;">
    <li style="display: inline-block; margin-right: 10px;">
      <mat-form-field>
        <mat-label>Option</mat-label>
        <input matInput formControlName="optionText">
      </mat-form-field>
    </li>
    <li style="display: inline-block;">
      <mat-label>Answer</mat-label><br>
      <mat-slide-toggle color="primary" formControlName="answer"></mat-slide-toggle>
    </li>
  </ul>
</div>

Current Scenario:

Screenshot

But I want if I click the 2nd option then the 3rd will get false automatically.

This is my example for the same in Stackblitz.

Please help me out.



from Angular: How to make Mat-Slide-Toggle to work as radio button?

No comments:

Post a Comment