Custom validation – Reactive Form (using class) in Angular

I already show you how can create custom validation using functions, now we can learn how to made a validation using classes.

reactive-form.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
   <input type="text" formControlName="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
      <div *ngIf="submitted && f.email.errors">
      <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 *ngIf="submitted && !f.email.errors.unique && !f.email.errors.required && !f.email.errors.email">Email already exists</div>
   </div>

   <input type="password" formControlName="password" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
   <div *ngIf="submitted && f.password.errors">
      <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 *ngIf="!f.password.errors.specialCharInclude && !f.password.errors.required && !f.password.errors.minlength">At least one special character</div>
   </div>

   <input type="password" formControlName="confirmPassword" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
   <div *ngIf="submitted && f.confirmPassword.errors">
      <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
   </div>

   <button>Register</button>
</form>


reactive-form.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { customValid } from './custom.validator';

@Component({
   selector: 'app-reactive-form2',
   templateUrl: './reactive-form2.component.html',
   styleUrls: ['./reactive-form2.component.css']
})
export class ReactiveForm2Component implements OnInit {
   registerForm: FormGroup;
   submitted = false;
   constructor(private formBuilder: FormBuilder, private customValid:customValid) { }
   ngOnInit() {
      this.registerForm = this.formBuilder.group({
         email: ['', [Validators.required, Validators.email, customValid.unique]],
         password: ['', [Validators.minLength(6),customValid.specialCharInclude]],
         confirmPassword: ['', Validators.required]
   });
}

get f() { return this.registerForm.controls; }

onSubmit() {
   this.submitted = true;
   if (this.registerForm.invalid) { return; }
      console.log(JSON.stringify(this.registerForm.value))
   }
}

 


custom-valid.validator.ts

export class customValid {
   static unique(control){
      const db = ['a@a.a','b@a.a'];
      if(db.indexOf(control.value) != -1){ return {unique:false} }
      return null;
   };

   static specialCharInclude(control){
      var limits = ['!','$','%'];
      var found = false;
      limits.forEach(function(specialChar){
         if(control.value.indexOf(specialChar)>-1){ found = true; }
      });
      if(!found){ return {specialCharInclude:false} }
      else { return null }
   };
}

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s