Angular + Template-Driven Forms - Required Checkbox Example
Example built with Angular 10.1.4
Other versions available:
- Angular Reactive Forms: Angular 10
- Next.js: Next.js
- React + Formik: Formik 2
- React Hook Form: React Hook Form 7, 6
- Vue + VeeValidate: Vue 3 Composition API, Vue 3 Options API
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>
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!