Angular Forms Part 6 CheckBox

 .html Changes

<form #studentForm="ngForm" (ngSubmit)="RegisterStudent(studentForm)">

        <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 class="panel-footer">

          <button class="btn btn-primary" type="submit">Submit</button>

        </div>

    </form>

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.

.ts Changes

export class FormsvalidationComponent {

  RegisterStudent(studentForm: NgForm): void {  

    console.log(studentForm.value);

  }

}

Output

Default Check Box Checked

<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

How to make it work

.ts Changes

export class FormsvalidationComponent {

  isAccept = true;

  RegisterStudent(studentForm: NgForm): void {  

    console.log(studentForm.value);

  }

}

.html

<div class="form-group">

          <div class="form-control">

            <label class="checkbox-inline">

              <input type="checkbox" name="isAccept" [(ngModel)]="isAccept">Accept Terms & Conditions

            </label>

          </div>

</div>

Output