I am currently working on a project to create a module with custom validation directives.
These validations are implemented using regular expressions (regex).
The specific error I encountered is:
Error: [$injector:unpr] Unknown provider: REG_EXPProvider <- REG_EXP <- uniIdValidatorDirective
Here is an overview of my code:
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 the HTML file:
<Input ... uni-id-validator />
Added in app.ts:
((): void=> {
var appLogin = angular.module("LoginModule", ['ngRoute', 'ngMessages']);
appLogin.config(LoginModule.Routes.configureRoutes);
})()