Published:

Angular + Template-Driven Forms - Required Checkbox Example

Example built with Angular 10.1.4

Other versions available:

This is a quick example of how to implement a required checkbox field in Angular with Template-Driven Forms. For a more detailed registration form example that includes a bunch of other fields see Angular 10 - Template-Driven Form Validation Example.

Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-template-driven-forms-required-checkbox)


Angular Required Checkbox App Component

The component doesn't need to do much when using angular template-driven forms since the checkbox form field and validator are defined in the component template below. The component defines a model object which is bound to the checkbox form field in the template so the component has access to the data entered into the form via this.model.

On submit a simple javascript alert is displayed with the values entered into the form.

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

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent {
  model: any = {};

  onSubmit() {
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.model, null, 4));
  }
}


App Component Template

The app component template contains the html markup for displaying the example required checkbox form in the browser. The checkbox field uses the [(ngModel)] directive to bind to the acceptTerms property of the model object in the app component. The checkbox is set to required with the required attribute on the input element, the Angular framework contains directives that match these attributes with built-in validator functions.

The form binds the submit event to the onSubmit() method in the app component using the Angular event binding (ngSubmit)="onSubmit()". Validation messages are displayed only after the user attempts to submit the form for the first time, this is controlled with the f.submitted property of the #f="ngForm" Angular template variable.

<div class="card m-3">
    <h5 class="card-header">Angular + Template-Driven Forms - Required Checkbox</h5>
    <div class="card-body">
        <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
            <div class="form-group form-check">
                <input type="checkbox" name="acceptTerms" id="acceptTerms" class="form-check-input" [(ngModel)]="model.acceptTerms" #acceptTerms="ngModel" [ngClass]="{ 'is-invalid': f.submitted && acceptTerms.invalid }" required>
                <label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</label>
                <div *ngIf="f.submitted && acceptTerms.invalid" class="invalid-feedback">Accept Ts & Cs is required</div>
            </div>
            <div class="text-center">
                <button class="btn btn-primary mr-1">Register</button>
                <button class="btn btn-secondary" type="reset">Cancel</button>
            </div>
        </form>
    </div>
</div>

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

 


Supported by