This is a quick example of how to implement a required checkbox field in Angular with Template-Driven Forms.

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));
  }
}

#angular #javascript #web-development #programming #dveloper