Validation using angular 2

Example of uppercase validator:

import { Directive } from '@angular/core';
import {NG_VALIDATORS, AbstractControl, ValidationErrors, Validator} from '@angular/forms';

@Directive({
  selector: '[uppercaseValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: UppercaseValidatorDirective, multi: true}]
})
export class UppercaseValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const value = control.value
    return /[A-Z]/.test(value) ? null : { uppercase: 'Must contain at least one upper case character'}
  }
}

Usage:

app.component.html

<form>
  <input uppercaseValidator [(ngModel)]="uppercase" #uppercaseCtrl="ngModel" name="uppercase"/>
  <div *ngIf="uppercaseCtrl.hasError('uppercase')">At least one character must be uppercased</div>
</form>

app.component.ts

<form>
  <input uppercaseValidator [(ngModel)]="uppercase" #uppercaseCtrl="ngModel" name="uppercase"/>
  <div *ngIf="uppercaseCtrl.hasError('uppercase')">At least one character must be uppercased</div>
</form>

Live demo

Create other validators by following the same steps of creating a custom validation directive. You just need to change the regexp and error message. You can use following regexp:

• uppercase: /[A-Z]/
• lowercase: /[a-z]/
• number: /[0-9]/
• special character: depends on what you consider a special character.

Better use Regex for this,

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]

(you are already checking for min length and max length, so no need to put length limitation in regex, but you can still do that via regex. Although I would suggest keep both of the error separated.)