Error in directive implementation of regex test as attribute - validations (typescript + angular)

Question

I'm trying to build a module that has directive for custom validations.

The validations are done via regex.

The error I am seeing is:

Error: [$injector:unpr] Unknown provider: REG_EXPProvider <- REG_EXP <- uniIdValidatorDirective

My code looks like this:

config.ts:

module LoginModule {

    'use strict';

    /***** REGEX *****/
    export class regExp {
        public ID_OR_PASSPORT = /^[0-9]{9}$/;
        public USERNAME_SINGLE_WORD = /^[A-Za-z0-9à-ú-_\.]{6,8}$/;
        public PASSWORD = /^[A-Za-z0-9à-ú-_\.]{8}$/;
        public EMAIL = /^([\?!\/]*)+\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        public ALPHANUMERIC = /^[a-zA-Z0-9]+$/;
        public NUM = /^[0-9]{1,}[.]{0,1}[0-9]{0,}$/;
        public PHONE_BODY = /^[0-9]{7}$/;
    };
    angular.module("LoginModule").value('REG_EXP', regExp);
}

Validation directive:

module LoginModule {
    uniIdValidator.$inject = ['REG_EXP'];
    angular.module('LoginModule').directive('uniIdValidator', uniIdValidator);
    export function uniIdValidator(REG_EXP): ng.IDirective {
        return {
            restrict: 'A',
            require: ['ngModel'],
            templateUrl: 'errorMessages.html',
            replace: true,
            link: (scope: ng.IScope, element: ng.IAugmentedJQuery, 
                   attrs: ng.IAttributes, ctrls:any) => {
                ctrls.$validators.userId = function (modelValue) {
                    return REG_EXP.ID_OR_PASSPORT.test(modelValue);
                };
            }
        }
    };
}

In my html:

<Input ... uni-id-validator />

added my app.ts:

((): void=> {
    var appLogin = angular.module("LoginModule", ['ngRoute', 'ngMessages']);
    appLogin.config(LoginModule.Routes.configureRoutes);
})() 

Answer 1

There is a working plunker (showing that the below approach is able to create working directive with simplified REG_EXP implementation)

The way I do create directives with Typescript is similar to this:

module LoginModule {
    //uniIdValidator.$inject = ['REG_EXP'];
    //angular.module('LoginModule').directive('uniIdValidator', uniIdValidator);
    export class uniIdValidator implements ng.IDirective 
    {
        constructor(public REG_EXP) {}
        public restrict: string = 'A';
        public require: string = 'ngModel';
        public templateUrl: string = 'errorMessages.html';
        public replace: boolean = true;
        public link: Function = (scope: ng.IScope, 
            element: ng.IAugmentedJQuery,
            attrs: ng.IAttributes, 
            ctrls:any) => 
            {
                ctrls.$validators.userId = function (modelValue) 
                {
                    //return REG_EXP.ID_OR_PASSPORT.test(modelValue);
                    return "TO DO";
                };
            }          
    }

    angular.module('LoginModule')
      .directive('uniIdValidator', ['REG_EXP', 
          (REG_EXP) =>  {return new LoginModule.uniIdValidator(REG_EXP) });
}

Check it here. Here is a link to place which was used to transpile the TS to JS.

Some other link to Q & A (or here) with working examples...