Checkbox in Angular Template Driven Forms

Back to: Angular Tutorials For Beginners and Professionals

Checkbox in Angular Template Driven Forms

In this article, I am going to discuss Checkbox in Angular Template Driven Forms in detail. Please read our previous article as it is a continuation part to that article where we discussed Radio Buttons in Angular Template Driven Forms. At the end of this article, you will understand what are Checkbox controls and when and how to use Checkbox in Angular Applications.

What is a Checkbox?

A Checkbox is an HTML element which allows the users to select multiple options from the available options. For example, in most of the website when you are filling a form you may find a checkbox for terms and conditions which needs to be accept in order to submit the form.

Example to understand Checkbox in Angular Template Driven Forms:

Let us understand how to create and use Checkbox in Angular Template Driven Forms. We are going to work with the same example that we worked in our previous article.

Now, we want to include “Accept Terms & Conditions” checkbox in the student registration form as shown in the below image. When we select the Accept Terms & Conditions checkbox and when we click the “Submit” button, we want to display the selected value of the checkbox in the console. Here, if the use select the checkbox then true will be logged into the console else false will be logged into the console.

How to create check box in angular template driven forms?

Please have a look at the below code which will create Accept Terms and Conditions checkbox.

Code Explanation

In the above code, we set the name attribute of the input element checkbox to isAccept. We have not set the value property here. This is because its value can be true of false. If the checkbox is checked or selected then the value is true else the value is false.

The complete code of app.component.html:

Following is the complete code of app.component.html file.

<br/>
<div class="container">
  <div class="row">
      <div class="form-bg">
          <form #studentForm="ngForm" (ngSubmit)="RegisterStudent(studentForm)"  >
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Student Registration</h3>
              </div>

              <div class="panel-body">

                <div class="form-group">
                  <label for="firstName">First Name</label>
                  <input id="firstName" type="text" class="form-control"
                        name="firstName" ngModel>
                </div>

                <div class="form-group">
                  <label for="lastName">Last Name</label>
                  <input id="lastName" type="text" class="form-control"
                        name="lastName" ngModel>
                </div>

                <div class="form-group">
                  <label for="email">Email</label>
                  <input id="email" type="text" class="form-control"
                        name="email" ngModel>
                </div>

                <div class="form-group">
                  <label>Gender</label>
                  <div class="form-control">
                    <label class="radio-inline">
                      <input type="radio" name="gender" value="male" ngModel>
                      Male
                    </label>
                    <label class="radio-inline">
                      <input type="radio" name="gender" value="female" ngModel>
                      Female
                    </label>
                  </div>
                </div>

                <div class="form-group">
                  <div class="form-control">
                    <label class="checkbox-inline">
                      <input type="checkbox" name="isAccept" ngModel>Accept Terms & Conditions
                    </label>
                  </div>
                </div>

              </div>
              <div class="panel-footer">
                <button class="btn btn-primary" type="submit">Submit</button>
              </div>
            </div>
          </form>
      </div>
  </div>
</div>

Modifying app.component.ts file:

We want to log the posted form values into the console tab. So, modify the app.component.ts file as shown below.

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  RegisterStudent(studentForm: NgForm): void {   
    console.log(studentForm.value);
  }
}

Save the changes and browse the application, then open browser developers tool by pressing F12 key and click on the console tab. Fill the form and click on the submit button and you should see the posted form values in the console tab as shown in the below image.

How to get a radio checkbox checked by default in Angular?

As we know when working with real-time applications, many a times we need to provide the checkbox to be checked by default when the form load initially and we normally do this by adding the checked attribute of the checkbox.

If we include the checked attribute on the checkbox, then we may expect that the checkbox to be checked by default when the page load. But in angular template driven forms, you will not get that default checked when the page loads initially.So, lets include the “checked” attribute on the checkbox and verify this. So. Modify the Checkbox HTML code as shown below.

<input type=”checkbox” name=”isAccept” ngModel checked>Accept Terms & Conditions

With the above changes in place, now browse the application and you will see the the checkbox is not checked by default when the page load.

However, if we remove the “ngModel” directive from the checkbox as shown below, then you will see that the checkbox is checked when the form is load.

 <input type=”checkbox” name=”isAccept” checked>Accept Terms & Conditions

As we already discussed, in Angular, we generally use the “ngModel” directive for two-way data binding. So when we put the ngModel directive back into the control then the “checked” attribute will not work on the checkbox. If we remove the ngModel then checked attributes work but two way data binding will not work.

How to make it works?

In order to make it work, we need to include a property lets say “isAccept” in the component class and initialize its value to true. So.modify the app.component.ts file as shown below.

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isAccept = true; 
  RegisterStudent(studentForm: NgForm): void {   
    console.log(studentForm.value);
  }
}

Modifying the app.component.html

Now we include to include the ngModel directive and bind it with the component property isAccept. To do so, modify the checkbox HTML code in the app.component.html file as shown below.

With the above changes in place, now browse the application, you should see the Accept Terms & Conditions checkbox is checked by default when the form loads initially.

Now, even if you remove the “checked” attribute from the checkbox, then it still checked by default when the form loads. This is possible because of the Angular two-way data binding. In our example, we do not want the checkbox to be checked by default, so we remove the “checked” attribute and the “isAccept” property from the component class and ngModel directive.

How to disable a Checkbox in Angular Template Driven Forms?

In order to disable a checkbox in Angular Template Driven Form, we need use the disabled attribute on the checkbox as shown below.

 <input type=”checkbox” name=”isAccept” ngModel disabled>Accept Terms & Conditions

With the above changes, now it is not possible to select the checkbox. The most important point that you need to remember is, by default, the disabled form controls are not included in the Angular auto generated form model. 

Since, the isAccept checkbox is disabled, it will not be included in the Angular generated form model. So, after the filling when you click on the button, in the console tab, you will not find the isAceept value as shown in the below image.

In our example, we do not want the checkbox to be disabled, so please remove the disabled attribute from the checkbox.

In our next article, I am going to discuss the Dropdownlist in angular template driven form with example. Here, in this article, I try to explain checkbox in angular Template Driven Forms. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.