Angular provides built-in library for validation, in the same way it gives validation methods to validate the string and numbers length as well. so in this tutorial i am going to explain how to use min length and max length validation in angular.
In angular validation library it provides different methods to validate the length of string and numbers. For number we use validators.min method for min length and validators.max method for max length of number.
For string we use validators.minLength and validators.maxLength methods to validate the number of char in a string.
Also read about Password and confirm password validation in angular 12 / 13 ? and How to generate component in angular cli?
Let’s start the Min Length and Max Length Validation in Angular with simple steps.
Step 1 : Create project and setup components
First step is to create the project and then create our first component so that we can create a form. I assume you have already installed node and angular
ng new project_nameStep 2 : Add form to component and import validation library
We are using FormGroup and FormControl to declare the reactive form in angular. Validators library to validate the fields. As you can see in below code we have imported FormControl, FormGroup, Validators from ‘@angular/forms’.
In next line we have created a FormGroup and assigned the controls to it.
src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
// import custom validator class
import { CustomValidators } from './providers/CustomValidators';
@Component({
selector: 'my-app',
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
success = '';
registerForm = new FormGroup({
firstName: new FormControl('', [
Validators.required,
Validators.maxLength(4),
]),
lastName: new FormControl('', [Validators.required]),
family_members: new FormControl('', [
Validators.required,
Validators.min(2),
]),
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [
Validators.required,
Validators.minLength(8),
]),
});
submitted = false;
constructor() {}
ngOnInit() {}
// convenience getter for easy access to form fields
get f() {
return this.registerForm.controls;
}
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
this.success = JSON.stringify(this.registerForm.value);
}
}
Here we used min and max to validate the numbers and minLength and maxLength to validate strings.
Step 3 : Create html file and bind FormGroup to form
Now, we are ready to bind our FormGroup to html form and FormControl to the fields.
<!-- main app container -->
<div class="readersack">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h3>Angular 12 - Reactive Forms Validation and Min and max length</h3>
{{ success ? 'Success - ' + success : '' }}
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>First Name</label>
<input
type="text"
formControlName="firstName"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"
/>
<div
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
<div *ngIf="f.firstName.errors.maxlength">
First Name should be less than 5 char.
</div>
</div>
</div>
<div class="form-group">
<label>Last Name</label>
<input
type="text"
formControlName="lastName"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"
/>
<div
*ngIf="submitted && f.lastName.errors"
class="invalid-feedback"
>
<div *ngIf="f.lastName.errors.required">
Last Name is required
</div>
</div>
</div>
<div class="form-group">
<label>Family members in the house</label>
<input
type="text"
formControlName="family_members"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.family_members.errors }"
/>
<div
*ngIf="submitted && f.family_members.errors"
class="invalid-feedback"
>
<div *ngIf="f.family_members.errors.required">
Family member is required
</div>
<div *ngIf="f.family_members.errors.min">
Family member count should be greater then 1
</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input
type="text"
formControlName="email"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.email.errors }"
/>
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">
Email must be a valid email address
</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input
type="password"
formControlName="password"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }"
/>
<div
*ngIf="submitted && f.password.errors"
class="invalid-feedback"
>
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- credits -->
<div class="text-center">
<p>
<a href="#" target="_top"
>Angular 12 - Reactive Forms Validation and Min and max length</a
>
</p>
<p>
<a href="https://readerstacks.com" target="_top">readerstacks.com</a>
</p>
</div>
Live Code and download