Angular radio button checked by default

Suggested Videos
Part 4 - Angular base href | Text | Slides
Part 5 - Angular forms tutorial | Text | Slides
Part 6 - Bootstrap radio buttons in Angular | Text | Slides

In this video we will discuss

• How to have a radio button checked by default
• How to disable a radio button

How to get a radio button checked by default in Angular : Consider the following HTML, that displays "Gender" radio buttons

<div class="form-group">

  <label>Gender</label>

  <div class="form-control">

    <label class="radio-inline">

      <input type="radio" name="gender" value="male" [(ngModel)]="gender" >

      Male

    </label>

    <label class="radio-inline">

      <input type="radio" name="gender" value="female" [(ngModel)]="gender">

      Female

    </label>

  </div>

</div>

If we include checked attribute on one of the radio buttons, 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.