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.

AT82 · Accepted Answer · 2019-08-13T10:15:29.723

80

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>

edited Aug 13 '19 at 10:15

answered Oct 21 '17 at 08:17

AT82

71,416
24
140
167

1

Sadly setting value 0 on radio-group makes all radio buttons unselected. Even tough one of my radio-button has value of 0. So I have to change from enum index values to enum string values to make it work correctly. I suppose increasing each value by +1 will also work. – Michał Ziobro Dec 29 '17 at 13:34
I want the radio button to be selected by default. For this, I'm using checked=true but it's not working. Could you please help me out? – Anil Kumar Jha Jan 27 '18 at 18:15
1

@AnilKumar use 'checked' only and that will work. Example 'Option 1' – MarmiK Jan 01 '19 at 11:15
great catch with checked attribute. – Harshad Vekariya Dec 09 '19 at 16:20
Why the hell it doesn't work with numbers and I'm forced to use strings in the enum? That's stupid. – Ap0st0l Aug 02 '23 at 09:06

score 6 · Answer 2 · answered Apr 16 '20 at 19:48

6

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>

answered Apr 16 '20 at 19:48

Khuram Niaz

881
10
16

1

When using a mat-radio-group within a component you need some way to define the FormGroup. Usually I see people do this with `mat-form-field` in material. This doesn't work for `mat-radio-group`. However, this solution works. In my case I used `` as opposed to a div. – P.Brian.Mackey Sep 23 '20 at 15:21

score 1 · Answer 3 · answered Dec 04 '21 at 10:28

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'],
    });
  }

score 1 · Answer 4 · answered Jan 21 '22 at 17:37

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>

score 0 · Answer 5 · answered Mar 27 '23 at 19:06

Somehow mat-radio-group appears to be broken. It does not work with formGroupName the way I expected it to.

Hence, I am using form.patchValue() directly in my template.

this.form = formBuilder.group({
  choice: new FormControl(1),
});

<mat-radio-group formGroupName="choiceType" 
                 (change)="form.patchValue({choice: $event.value})">
  <mat-radio-button [value]="1" checked>Single-choice</mat-radio-button>
  <mat-radio-button [value]="2">Multi-choice</mat-radio-button>
</mat-radio-group>

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

5 Answers5