使用 ng 消息和打字稿的自定义验证指令

Question

我正在尝试构建一个模块，该模块具有用于自定义验证的指令并使用 ng-messages 显示它们

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

我看到的错误是：

Error: [$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found!

我的代码如下所示：

验证指令：

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', LoginModule.regExp);
}

module LoginModule {

    export class uniIdValidator implements ng.IDirective {
        constructor(public REG_EXP) { }
        public restrict: string = 'A';
        public require: string[] = ['ngModel'];
        public templateUrl: string = 'errorMessages.html'; //this should be external file, will be used later
        public replace: boolean = false;
        public link: Function = (scope: ng.IScope,
            element: ng.IAugmentedJQuery,
            attrs: ng.IAttributes,
            ctrls: any) => {
            ctrls[0].$validators.userId = function (modelValue) {
                //return REG_EXP.ID_OR_PASSPORT.test(modelValue);
                console.log(modelValue)
                return modelValue;
            };
        }
    }

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

在我的 html:

<Input ... uni-id-validator />
<div class="login-form__error-box" ng-messages="loginForm.loginFormId.$error">
                <span class="login-form__error-msg" ng-message="userId">error in ID</span>
                <span ng-message="required">This is required</span>
 </div>

我的应用模块：

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

我的控制器太长 post 这里，但它没有注入 ngMessages（我也尝试使用静态注入 --> 没用）

显然我做错了什么，但我不知道是什么。（这是我之前遇到的问题的延续）

Answer 1

ngMessages 模块需要一个单独的 angular-messages.js 文件。我没有看到您加载脚本文件的主应用 index.html 页面，但请检查以确保包含您需要的那个。如果没有，您将看到此消息。 ngMessages Docs

中提供了有关下载和 CDN 的信息

Answer 2

最终错误出现在模板文件上 (errorMessages.html)。我在那里有：

<span ng-message="required">Required</span>

导致错误的原因是他正在寻找存在于我的页面上但不存在于模板上的控制器 'ng-messages'。我从指令中删除了模板的使用，并在我的 html 中使用了 ng-messages-include。（注意版本 > 1.4.0b 的变化，它必须在单独的元素上）

使用 ng 消息和打字稿的自定义验证指令

Custom validation directive using ng messages and typescript

validation

angularjs

typescript

angularjs-directive

ng-messages