Obtaining the selected value of <mat-radio-group> in a typescript file when the SAVE button is clicked

Question

Obtaining the selected value of <mat-radio-group> in a typescript file when the SAVE button is clicked

I am facing a situation where I have radio buttons in my HTML code. The radio button options are as follows:

 <mat-radio-group aria-label="Availability for joining" formControlName="availabilityGroup">
          <mat-radio-button value="1" [checked]='true'>Immediate</mat-radio-button>
          <mat-radio-button value="2">1 Month Notice</mat-radio-button>
          <mat-radio-button value="3">3 Month Notice</mat-radio-button>
 </mat-radio-group>

My requirement is to fetch the selected radio button value by the user, and I need to access this value in my typescript file once the user clicks on the SAVE button.

Can someone guide me on how to achieve this?

angular typescript angular-material

Answer 1

Answer №1

Utilizing Reactive Forms in your project is a great choice. It appears that you are using a FormGroup to group your form controls, which may be set up similar to the example shown below:

@Component()
export class MyComponent {
  public formGroup: FormGroup = new FormGroup({
    availabilityGroup: new FormControl()
  });
  ...
}

If you need to access the value of a selected radio button within this FormGroup, you can do so using the following code snippet:

this.formGroup.controls.availabilityGroup.value;

Answer 2

Utilizing Reactive Forms in your project is a great choice. It appears that you are using a FormGroup to group your form controls, which may be set up similar to the example shown below:

@Component()
export class MyComponent {
  public formGroup: FormGroup = new FormGroup({
    availabilityGroup: new FormControl()
  });
  ...
}

If you need to access the value of a selected radio button within this FormGroup, you can do so using the following code snippet:

this.formGroup.controls.availabilityGroup.value;

Obtaining the selected value of <mat-radio-group> in a typescript file when the SAVE button is clicked

Answer №1

Similar questions

Angular: implementing lazy loading module specifically for development environment (environment.production === false)

When employing a string union, property 'X' exhibits incompatibility among its types

Effective strategies for managing form submissions with React and Typescript

Trouble with HTTP.GET Request within a Previous Event Situation

Using ng-template in child component from Parent Component in Angular

Unmark the checkboxes when the "Anywhere" option is selected

What is the relationship between an object and a class in typescript and how can we define

unable to verify identity through a web browser

The Material UI Datagrid is failing to display any data

Using an Angular HttpClient to authenticate with an API by utilizing a token for

Issue with Data Table not updating after saving

Automatic Formatting of Typescript in SublimeText

Ensure that the value of a variable in the Ionic/Angular template has been properly initialized

Create a unique TypeScript constant to be mocked in each Jest test

Saving data from a one-to-one relationship using TypeORM and NestJS in a socalled way is a breeze - here's how you

What could be causing the rendering issue on this React component page when an id is provided in the React Router URL?

Sharing enums between client and server code in Webpack is a smart way to improve

Struggling with "Content" not being recognized in Typescript PouchDB transpilation errors?

Troubleshooting the unexpected behavior of the shareReply() method in Angular version 15

Experimenting with parallelism using TypeScript/JS