Typescript angular mat-radio-button change option programmatically

Question

I have a mat-radio-button and it works perfectly.

But what I want is : When I receive the parameters, I want to select the right button. So I need to access my button and select it programmatically.

Here's the HTML

      <form [formGroup]="seasonFrmGroup">
        <mat-radio-group aria-labelledby="radio-group-label2" class="radio-group" [(ngModel)]="selectedSeasonType"
          formControlName="btnSeason" fxLayoutAlign="center">
          <mat-radio-button class="radio-button" selectedSeasonTypevalue="s" (change)="radioChoiceSeason('s')">
            {{'Season' | translate }}
          </mat-radio-button>
          <mat-radio-button class="radio-button" selectedSeasonTypevalue="p" (change)="radioChoiceSeason('p')">
            {{'Playoffs' | translate }}
          </mat-radio-button>
        </mat-radio-group>
      </form>

And in my .ts file, I want to select my radio-button (Here I supposed that my parameter received is the S

ngOnInit() {
  this.seasonFrmGroup = new FormGroup({
    'btnSeason': new FormControl()
  });

  this.seasonFrmGroup.get("btnSeason").patchValue("s");
}

But I have these errors:

ERROR Error: formGroup expects a FormGroup instance. Please pass one in. ERROR TypeError: Cannot read properties of undefined (reading 'get')

It's been a long time that I didn't modify the code, and I don't see what I missing to make it works. Maybe I'm close of the answer, maybe I'm totally out of it, but I search and I didn't found a solution telling how to select my radio-button on the init.

Thanks

First decide if you are going to use ngModel or reactive forms, they are not supposed to be used together, really :) — AVJT82
– AVJT82, Commented Dec 21, 2021 at 15:22

Deepak Jha · Accepted Answer · 2021-12-22 03:10:39Z

1

Firstly dont use ngModel with reactive form,

ngModel is depricated

Now I think the approach you should be taking is something like this,

your component class can look like below,

import { Component } from '@angular/core';
import { 
  FormBuilder,
  FormGroup,
  FormControl
} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'stackoverflow-examples';
    seasonFrmGroup: FormGroup;

    constructor(
      private fb: FormBuilder
    ) { 
      this.seasonFrmGroup = new FormGroup({
        'btnSeason': new FormControl('')
      });
    }

    ngOnInit() {
      this.seasonFrmGroup.valueChanges.subscribe(
        val => {
          // Just to show you that you can get the changed values easily
          console.log('Value of button clicked/selected',val.btnSeason);
        }
      );

      
      this.seasonFrmGroup.patchValue({
        btnSeason: 's'
      });
    }

    radioChoiceSeason(val: any) {
     //Do your thing here if clicked
    }
}

Your HTML file can look like this with reactive form,

<form [formGroup]="seasonFrmGroup">
  <mat-radio-group aria-labelledby="radio-group-label2" class="radio-group"
    formControlName="btnSeason" fxLayoutAlign="center">
    <mat-radio-button class="radio-button" value="s">
      {{'Season' | translate}}
    </mat-radio-button>
    <mat-radio-button class="radio-button" value="p">
      {{'Playoffs' | translate}}
    </mat-radio-button>
  </mat-radio-group>
</form>

look at the screenshot below,

edited Dec 22, 2021 at 3:10

answered Dec 21, 2021 at 17:01

Deepak Jha

1,61913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

baronming Over a year ago

Well 2 things, 1- I still have the error (curiously).

baronming Over a year ago

2- you set the button in the constructor like this: 'btnSeason': new FormControl('s') ... but I get my parameters outside. so THE 's' maybe can be not good id I receive a P.

Deepak Jha Over a year ago

you are free to design your logic, but I saw you were initializing your form and then assigning it with 's', that's why I already assigned it to be 's' in the constructor itself. I have no console error nor I have any compile time error in this code snippet :) can you provide stalkblitz ?

Deepak Jha Over a year ago

I think I have realised your error, you are using patch value incorrectly I guess, let me change my solution.

Collectives™ on Stack Overflow

Typescript angular mat-radio-button change option programmatically

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related