We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

RadioButton not getting checked, but ngModel is correct

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


5 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team October 14, 2022 01:35 AM

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 radioSchwangerschaftStatusSchwangerschaft = Schwangerschaft.Unbekannt;

  public radioNichtErfasstRadioButtonComponent;

 

  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



MW Matthias Wagner October 14, 2022 07:06 AM

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



YA YuvanShankar Arunagiri Syncfusion Team October 17, 2022 02:35 AM

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 Schwangernumber = 1;

  public Unbekanntnumber = 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


Marked as answer

MW Matthias Wagner October 17, 2022 08:49 AM

Thank you very much. Works perfectly.

Regards



YA YuvanShankar Arunagiri Syncfusion Team October 17, 2022 10:58 PM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon