Deselect Radio Button from Angular Material

Question

Hello, I have a problem at Angular. I want my Angular Material button select to be unchecked (uncheck) when the following function is called, but I have no idea how to do it, can anyone help me. I’ll put the codes down here.

Code of the function

uncheckRadio(){
  alert('Botao desmarcado')
}

Code for my Radio Button:

<div  class="form-group col-md6 form-md-checkboxes">
   <label>Instância</label>
   <mat-radio-group (change)="radioChange($event)" formControlName="status">
   <mat-radio-button color="primary" value="primeira">Primeira Instancia</mat-radio-button>
   <mat-radio-button color="primary" value="segunda">Segunda Instancia</mat-radio-button>
   </mat-radio-group>
</div>

Answer 1

For that just set null in your control.

In the example below I created a button to call the method uncheckRadio

<div  class="form-group col-md6 form-md-checkboxes">
    <label>Instância</label>
    <mat-radio-group (change)="radioChange($event)" formControlName="status">
      <mat-radio-button color="primary" value="primeira">Primeira Instancia</mat-radio-button>
      <mat-radio-button color="primary" value="segunda">Segunda Instancia</mat-radio-button>
    </mat-radio-group>
    <button mat-raised-button class="restore-button" (click)="uncheckRadio()">Restore Defaults</button>
  </div>

In the file ts I take the control in formGroup and reset the value or Seto null.

uncheckRadio() {
   this.formGroup.get('status').reset();
   // Ou pode ser feito assim: this.formGroup.get('status').setValue(null);
}