exe-control-messages.component.ts

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

import { ValidationService } from './validation.service';

@Component({
    selector: 'exe-control-messages',
    template: `
      <div *ngIf="errorMessage">
        <span>{{ errorMessage.message }}</span>
      </div>
    `
})
export class ExeControlMessagesComponent {
    @Input() control: FormControl;

    get errorMessage(): { type: string, message: string } {
        let _errorMessages: Array<{ type: string, message: string }> = [];
        for (let propertyName in this.control.errors) {
            if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
                return {
                    type: propertyName,
                    message: ValidationService.getValidatorErrorMessage(propertyName,
                        this.control.errors[propertyName])
                };
            }
        }
    }
}

validation.service.ts

import { Injectable } from '@angular/core';
import { FormControl } from '@angular/forms';

@Injectable()
export class ValidationService {
    static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
        let config = {
            'required': 'Required',
            'invalidCreditCard': 'Is invalid credit card number',
            'invalidEmailAddress': 'Invalid email address',
            'invalidPassword': 'Invalid password. Password must be at least 6 characters long, and contain a number.',
            'minlength': `Minimum length ${validatorValue.requiredLength}`,
            'maxlength': `Maximun length ${validatorValue.requiredLength}`,
        };

        return config[validatorName];
    }

    static creditCardValidator(control: FormControl) {
        if (control.value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/)) {
            return null;
        } else {
            return { 'invalidCreditCard': true };
        }
    }

    static emailValidator(control: FormControl) {
        if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
            return null;
        } else {
            return { 'invalidEmailAddress': true };
        }
    }

    static passwordValidator(control: FormControl) {
        if (control.value.match(/^(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{6,100}$/)) {
            return null;
        } else {
            return { 'invalidPassword': true };
        }
    }
}