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>
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Angular Help?
Search fiverr to find help quickly from experienced Angular developers.
Support my work
