正则表达式测试作为属性的指令实现错误 - 验证(打字稿 + 角度) [英] Error in directive implementation of regex test as attribute - validations (typescript + angular)

问题描述

我正在尝试构建一个具有自定义验证指令的模块.

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

验证通过正则表达式完成.

The validations are done via regex.

我看到的错误是:

错误:[$injector:unpr] 未知提供者:REG_EXPProvider <- REG_EXP <- uniIdValidatorDirective

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

我的代码如下所示:

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);
}

验证指令:

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);
                };
            }
        }
    };
}

在我的 html 中:

In my html:

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

添加了我的 app.ts:

added my app.ts:

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

推荐答案

有一个工作的plunker (表明以下方法能够使用简化的 REG_EXP 实现创建工作指令)

我使用 Typescript 创建指令的方式与此类似:

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) });
}

在此处检查.这是一个链接，用于将 TS 转译为 JS.

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

一些其他问答链接A(或此处)与工作示例...

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

这篇关于正则表达式测试作为属性的指令实现错误 - 验证(打字稿 + 角度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！