How to bind default value in mat-radio-group angular reactive forms

Question

In my case it needs to active option 01 as default selection. It is working with checked=true property, but value is not binding with the formControlName="options", it is binding when user select any option. if no any user selection options value shows as "null".

  <div class="row">
      <mat-radio-group formControlName="options">
        <mat-radio-button checked=true  value="1">Option 01</mat-radio-button>
        <mat-radio-button  value="2">Option 02</mat-radio-button>
      </mat-radio-group>
    </div>

Please kindly help me to resolve this issue. Thank you.

Answer 1

What you want to do is to remove the checked and instead set the preselected value to your formControl, so when you build your form:

constructor(private fb: FormBuilder) { 
  this.myForm = this.fb.group({
    options: ['1']
  })
}

and then you just remove the checked attribute:

<mat-radio-group formControlName="options">
  <mat-radio-button value="1">Option 01</mat-radio-button>
  <mat-radio-button  value="2">Option 02</mat-radio-button>
</mat-radio-group>

Answer 2

Alternate way:

 this.optionFormGroup = new FormGroup({
  options: new FormControl('1'); // the value type (string) should match
 })

--

  <div class="row" [formGroup]="optionFormGroup">
   <mat-radio-group formControlName="options">
     <mat-radio-button checked value="1">Option 01</mat-radio-button>
     <mat-radio-button  value="2">Option 02</mat-radio-button>
   </mat-radio-group>
  </div>

Answer 3

This will default select "yes" option from radio button options.

  <form [formGroup]="optionsFormGroup">
        <mat-grid-list cols="1" rowHeight="75px">
          <mat-grid-tile>
            <label>Option</label>
            <mat-radio-group formControlName="statusOptions" class="m-l-5">
              <mat-radio-button class="m-r-5" value="yes">Yes</mat-radio-button>
              <mat-radio-button class="m-r-5" value="no">No</mat-radio-button>
            </mat-radio-group>
            <mat-icon class="info-icon">help_outline
            </mat-icon>
          </mat-grid-tile>
        </mat-grid-list>
    </form>

initFormControls() {
    this.optionsFormGroup = this.formBuilder.group({
      statusOptions: ['yes'],
    });
  }

Answer 4

This is look like other answers, but uses boolean values

ts

form: FormGroup = this.formBuilder.group({
  enable: ['']
});

ngOnInit(): void {
  this.form.get('enable').setValue(false);
}

template

<mat-radio-group aria-label="Select an option" formControlName="enable">
   <mat-radio-button [value]="true" color="primary">Enable</mat-radio-button>
   <mat-radio-button [value]="false" color="primary" class="radio">Disable</mat-radio-button>
</mat-radio-group>