using Template Driven forms
This approach focuses on html first approach, user can define all their validator in the html and by using the power of NgForm we can convert the html form into angular NgForm object. To start using it we must first import FormsModule in our app.component.ts.
<!-- app.component.html -->
<form #myForm="ngForm" (ngSubmit)="submit(myForm)">
<label>
<input type="checkbox" name="terms_and_cond" ngModel required>
By checking this, I agree to your terms and conditions.
</label>
<br>
<label>
<input type="checkbox" name="news_letter" ngModel>
Sign me up for the newsletter.
</label>
<br>
<button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>
/* app.component.scss */
form {
width: 400px;
border: 1px solid #ccc;
border-radius: 8px;
margin: 64px auto;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
font-size: 16px;
p,
input {
font-size: 20px;
}
button {
height: 40px;
font-size: 16px;
border-radius: 20px;
}
}
// app.component.ts
import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'sample-app';
submit(ngForm: NgForm) {
console.log(`valid: ${ngForm.form.valid}`);
console.log(`value: `, ngForm.form.value);
}
}
You can observe here that all the validators (here required) are defined in the html itself, while in our ts file we get the final NgForm object.
Output
This is a much simple approach to start with, but it has its limitation.
- Limited Control: With template-driven forms, Angular does a lot of the work behind the scenes, based on the HTML template you provide. This means you have less control over how the form behaves, especially if you need something more complex.
- Testing Difficulties: Testing template-driven forms can be tricky because a lot of the form logic is tied to the HTML template. It’s harder to test individual parts of the form separately.
- Less Flexibility: Template-driven forms work well for simple forms, but they might not be the best choice if you need a more complex form with changing requirements. Reactive forms give you more flexibility to handle complex scenarios.
- Readability Concerns: When you have a large form or a lot of form logic in the HTML template, it can become cluttered and harder to read. This can make it more difficult to maintain or troubleshoot the form over time.
- Limited Validation: While template-driven forms provide basic validation features, they might not cover all the validation scenarios you need. Reactive forms offer more extensive validation capabilities, including custom validators and asynchronous validation.
How to validate checkbox form in angular 15
In Angular applications, it is often necessary to validate form inputs to ensure that users provide the required information correctly. Checkbox inputs are commonly used to allow users to select one or more options from a list. This article will cover different approaches to validating checkbox inputs in an Angular 17 form.