In this Angular 8 form validation tutorial, we will show you how to create public message for the form validation and custom validation rules. This will make easy to use and flexible.
Before get start you must have the knowledge about the validation if you don’t know, Please read the ‘Angular 8 Form Validation‘ post first.
Let’s get started
First we will create a service. In this service we will define our error messages and custom validation method.
Type the below command to create a service
ng g service validation
Replace the file with the below code
import { Injectable } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Injectable({
providedIn: 'root'
})
export class ValidationService {
constructor() { }
static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
let config = {
'required': 'This field is required',
'email': 'The ' + validatorName + ' must contain a valid email address',
'invalidPassword': 'Password must be at least 6 characters long, and contain a number.',
'minLength': `Minimum length ${validatorValue.requiredLength}`,
'invalidMatch': 'The password and confirm password must match'
};
return config[validatorName];
}
static password(control: FormControl) {
// {6,100} - Assert password is between 6 and 100 characters
// (?=.*[0-9]) - Assert a string has at least one number
if (control.value.match(/^(?=.*[0-9])[[email protected]#$%^&*]{6,100}$/)) {
return null;
} else {
return { 'invalidPassword': true };
}
}
static match(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors.invalidMatch) {
return;
}
// set error on matchingControl if validation fails
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ invalidMatch: true });
} else {
matchingControl.setErrors(null);
}
}
}
}
Here under the getValidatorErrorMessage method you can define your own error messages. You may notice we have a static method called password. This is our rule for the validation.
Now we will create a new component. Type the below command to create component
ng g component errorMessage
Open the error-message.component.ts file and put the below code on it
import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from '../validation.service';
@Component({
selector: 'error-message',
templateUrl: './error-message.component.html',
styleUrls: ['./error-message.component.css']
})
export class ErrorMessageComponent {
@Input() control: FormControl;
constructor() { }
get errorMessage() {
for (let propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName)) {
return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
}
}
return null;
}
}
Then open the error.message.component.html file and put the below html
<div class="text-danger" *ngIf="errorMessage !== null">{{errorMessage}}</div>
Now register ValidationService service and ErrorMessage component for our application. So that we can use in our application. To registered open app.module.ts file and import the ValidationService service and ErrorMessage component.
import { ValidationService } from './validation.service';
import { ErrorMessageComponent } from './error-message/error-message.component';
Then add the ValidationService in the providers like the below
providers: [ ValidationService ]
Then add the ErrorMessageComponent in the declarations
declarations: [
..
ErrorMessageComponent
]
After adding the validationService our app.module.ts file will looks like this
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { FormComponent } from './form/form.component';
import { RegisterComponent } from './register/register.component';
import { ErrorMessageComponent } from './error-message/error-message.component';
import { ValidationService } from './validation.service';
@NgModule({
declarations: [
AppComponent,
FormComponent,
RegisterComponent,
ErrorMessageComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
],
providers: [ ValidationService ],
bootstrap: [AppComponent]
})
export class AppModule { }
Now our error-message component and new validation rules is ready to use.
Open your app.component.ts file and import the ValidationService
import { ValidationService } from './validation.service';
Then add the rules in the form group
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', [Validators.required, ValidationService.password]]
},{
validator: [
ValidationService.match('password', 'confirmPassword'),
]
});
After the changes our app.component.ts file will looks like this
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidationService } from './validation.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'helloworld';
registerForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', [Validators.required, ValidationService.password ]]
}, {
validator: [
ValidationService.match('password', 'confirmPassword'),
]
});
}
onSubmit() {
this.submitted = true;
// stop the process here if form is invalid
if (this.registerForm.invalid) {
return;
}
alert('SUCCESS!!');
}
}
Then open the app.component.html file and replace the html with the below html
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h3>Register</h3>
<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 && registerForm.controls.firstName.errors }" />
<error-message [control]="registerForm.controls.firstName" *ngIf="submitted"></error-message>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.lastName.errors }" />
<error-message [control]="registerForm.controls.lastName" *ngIf="submitted"></error-message>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.email.errors }" />
<error-message [control]="registerForm.controls.email" *ngIf="submitted"></error-message>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.password.errors }" />
<error-message [control]="registerForm.controls.password" *ngIf="submitted"></error-message>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.confirmPassword.errors }" />
<error-message [control]="registerForm.controls.confirmPassword" *ngIf="submitted"></error-message>
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
</div>
</form>
</div>
</div>
</div>
Angular8 form validation form will looks like this
