正则表达式测试作为属性的指令实现错误 - 验证（打字稿+角度）

Posted 2023-03-13

【中文标题】正则表达式测试作为属性的指令实现错误 - 验证（打字稿+角度）

【英文标题】：Error in directive implementation of regex test as attribute - validations (typescript + angular)

【发布时间】：2015-11-29 08:50:36

【问题描述】：

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

验证是通过正则表达式完成的。

我看到的错误是：

错误：[$injector:unpr] 未知提供者：REG_EXPProvider

我的代码如下所示：

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 中：

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

添加了我的 app.ts：

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

【参考方案1】：

有a working plunker （表明下面的方法能够通过简化的 REG_EXP 实现创建工作指令）

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

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

检查它here。 Here is a link 用于将 TS 转换为 JS 的地方。

一些other link to Q & A（或here）的工作示例...

【讨论】：

谢谢你，你能改变你的例子来包括输入字段吗？我不明白如何使用它：/

我不得不注释掉你的return REG_EXP.ID_OR_PASSPORT.test(modelValue)，因为我不确定这些东西的整体概念。换句话说，不确定该指令应该做什么。因此，还有另一个 plunker，其版本可以记录您输入的内容：plnkr.co/edit/HIOCzsh0tPSGep9MBQY9?p=preview 希望对您有所帮助

如果输入的正则表达式失败，该指令应显示错误消息。 （使用 ng 消息）。立即试用您的新版本。

谢谢，我已经取得了进展，你缺少一个']'，plucker 只是呈现给一个有效的 js，就像我的一样。 （如果你可以编辑它，它会更好），现在我有错误，缺少'ngMessage'，试图找出原因。 Tnx！

我试图复制您的问题，但我无法收到您的错误消息；（如果您可以创建一些 plunker...对于这个问题，我可以提供帮助...或显示更多你的代码和完整的例外......任何可以让我获得更多信息的东西