Getting first value as “undefined” while retrieving selected material radio button value using ngModel

0
votes

I'm using angular 6 and material components where i have made a radio button group in which there are two options given to select in which i have used ngModel to get the value of selected radio button but getting undefined value on the first click and getting previous selected value while clicking another option Please Help Code is given below:-

App.Component.html

<mat-radio-group formControlName="offers" [(ngModel)]="offers">
<mat-radio-button value="freeShipping" (click)="offerStatus(offers)">Free shipping</mat-radio-button>
<mat-radio-button value="nextDay" (click)="offerStatus(offers)"> Next Day</mat-radio-button>
</mat-radio-group>

App.component.ts

  offerStatus(data){
  console.log(data);
}

Output

undefined //when selecting any one of the options

freeShipping //when selecting nextDay option

nextDay //when selecting freeShipping

Expected Output

freeShipping // when selecting freeShipping

nextDay // when selecting nextDay
1
angularangular-materialangular6
is below solution worked? – Prashant Pimpale

1 Answers

1
votes

use the change instead of click 

<mat-radio-button value="freeShipping" (change)="offerStatus(offers)">Free shipping</mat-radio-button>