Angular radio button checked by default

In this video we will discuss
1. How to have a radio button checked by default
2. How to disable a radio button

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

If you need the code samples used in the demo, you may copy them from our blog using the link below.

If we include checked attribute on a radio button, we expect that radio button to be checked by default when the form initially loads. But you will discover that is not the case. In the following example, we have included "checked" attribute on "Male" radio button, but when the form is displayed it is not checked.
[input type="radio" name="gender" value="male" [(ngModel)]="gender" checked]

However, if you remove the "ngModel" directive from the radio button, then it gets checked as expected. Notice the "ngModel" directive is removed from the radio button.

[input type="radio" name="gender" value="male" checked]

With Angular Template Driven forms, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "checked" attribute does not work. To make it work include "gender" property in the component class and initialise to the value of the radio button that you want to have checked by default. In our case, let us say, we want the "Male" radio button to be checked by default. To achieve this include "gender" property initialised to value of "male" in the component class as shown below.

gender = 'male';

At this point you will have "Male" radio button checked by default when the form loads. Now, even if we remove the "checked" attribute from the "Male" radio button it is still checked by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. For our form we do not want any radio button to be checked by default, so remove the "checked" attribute and the "gender" property from the component class.

How to disable a radio button : To disable a radio button, use the disabled attribute on that radio button. "Male" radio button in this case will be disabled when the form initially loads.
[input type="radio" name="gender" value="male" [(ngModel)]="gender" disabled]

Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "Male" radio button is disabled, the gender property will not be included in the Angular generated form model.

In our form, we do not want any radio button to be disabled, so please remove the disabled attribute.

In our next video, we will discuss working with CheckBox control in Angular Template Driven forms.

Text version of the video

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[bhagvatlande]

sir yours video really help me while working... thanks for great video

[nishcheymaithani]

@kudvenkat Please make one on -
How to do this with boolean values?

[inter]

Hey all this knowledge is great but can you put together projects so we can really understand how to put all the dispersed knowledge together. Also is ASP.NET needed to be a .NET developer at the junior level?

[RajatGuptaOnline]

Hi I was working on angular and now I want to start my career in web development, can you please share the path to become angular dev from zero and also other backend technology that I need to learn .

[krishponugumati]

Sir i have one doubt, how can we change the background color of that particular form-control only if the radio button is checked. Pls help me out in this ASAP.

[nessd]

Only works if you put the [(ngModel)]="gender" directive on both radios, and you need to declare the property on the component. This is useful only if you want to initialize a control, otherwise its sufficient using ngModel alone.

[octaviomora]

Thanks a lot... those radio buttons were making me out of mind too...

[snehaarvapelli]

Is it possible to have radio button to be checked, Without setting [(ngModel)] = "gender" in angular?

[sashidhar]

In Angular 8, the disabled property on one of the radio is disabling the whole set, so include the attribute property of the html element.
[attr.disabled]="true"

[en_life_guru]

Sir if we add disabled then how to get that value after clicking submit button

[ma-pjgz]

pls how to make <ng-option> by default

[harismazlan]

this doesnt work for edit form does it?

[笨土豆]

when you set [(ngModel)] = "", at the mean time you should also set true}"

[vigneshp]

How to check radio button by default in angular js?