RadioButton not getting checked, but ngModel is correct

[Matthias Wagner]

Hi,

i have a radiobutton and i set its ngModel in ngOnInit-method.
The model is set correctly, but the radiobutton isnt getting checked.

Here my code on stackblitz (https://stackblitz.com/edit/angular-ivy-gkeyeg?file=src/app/app.component.ts )

Thx for help, regards

[YuvanShankar Arunagiri]

Hi Matthias,

We have checked your provided sample and found an issue in your sample code. In radio button, value as string type “0” and “1”. But in ngModel you set as number. So only it does not work as except. Please ensure the type of value and for your reference, please refer the below sample and UG link.

UG link: https://ej2.syncfusion.com/angular/documentation/radio-button/how-to/two-way-binding-using-radiobutton/

[app.component.ts]:

enum Schwangerschaft {

  Unbekannt = "0",

  Schwanger = "1",

}

……….

export class AppComponent {

  public radioSchwangerschaftStatus: Schwangerschaft = Schwangerschaft.Unbekannt;

  public radioNichtErfasst: RadioButtonComponent;

 

  ngOnInit(): void {

    this.radioSchwangerschaftStatus = Schwangerschaft.Schwanger;

  }

}

Sample link: https://stackblitz.com/edit/angular-ivy-4us4sb?file=src%2Fapp%2Fapp.component.ts

Could you please check the above code and get back to us, if you need any further assistance on this.

Regards, 

YuvanShankar A

[Matthias Wagner]

Thanks.

We get this enum from our model, which i cant change. I wrote a mapper now for the enum and it works.

Is there perhaps the possibility to set the value as an int type, so i can use the enum with int and not string?

Thx regards

Matthias

[YuvanShankar Arunagiri]

Hi Matthias,

We have checked your reported query and prepared the sample based on your requirement. Please refer the below code snippet and sample link. If we directly assign the values-to-value property of radio button, it considers as string. If we need to assign the int type to value property, then we need to assign the number type variable to value property like below

[app.component.ts]:

public Schwanger: number = 1;

  public Unbekannt: number = 0;

[app.component.html]:

<ejs-radiobutton

          #radioNichtErfasst

          label="Unbekannt"

          name="schwangerschaft"

          [value]="Unbekannt"

          [(ngModel)]="radioSchwangerschaftStatus"

        ></ejs-radiobutton>

Sample link: https://stackblitz.com/edit/angular-ivy-slqsm6?file=src%2Fapp%2Fapp.component.ts

Could you please check the above code and get back to us, if you need any further assistance on this.

Regards, 

YuvanShankar A

[Matthias Wagner]

Thank you very much. Works perfectly.

Regards

[YuvanShankar Arunagiri]

You are welcome, Matthias. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.