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

齐夫·魏斯曼(Ziv Weissman)

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

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

我看到的错误是:

错误:找不到指令'ngMessage'所需的[$ compile:ctreq]控制器'ngMessages'!

我的代码如下所示:

验证指令:

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

我的控制器太长了,无法在此处发布,但它没有ngMessages注入(我也尝试使用静态注入->无效)

显然我做错了,但是我不知道怎么办。(这是我之前在这里遇到的一个问题的继续

齐夫·魏斯曼(Ziv Weissman)

最终,错误出在模板文件(errorMessages.html)上。在那儿,我有:

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

这引起了错误,因为他正在寻找存在于我的页面而不是模板上的控制器“ ng-messages”。我从指令中删除了模板的使用,并在html中使用了ng-messages-include。(请注意,从版本> 1.4.0b起的更改必须在单独的元素上)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自定义useInput钩子和打字稿错误

来自分类Dev

带有复选框网格的打字稿,带有管道分隔值和自定义验证规则

来自分类Dev

Axios打字稿自定义AxiosRequestConfig

来自分类Dev

ANgularjs:ng-repeat和嵌套的自定义指令

来自分类Dev

带templateUrl和ng-repeat的自定义指令

来自分类Dev

带templateUrl和ng-repeat的自定义指令

来自分类Dev

ANgularjs:ng-repeat和嵌套的自定义指令

来自分类Dev

使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

来自分类Dev

使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

来自分类Dev

使用自定义指令与angularjs进行验证

来自分类Dev

使用自定义指令与angularjs进行验证

来自分类Dev

在自定义指令中使用ng-blur

来自分类Dev

使用ng-repeat嵌套自定义指令

来自分类Dev

Polymer CoreInput设置自定义验证消息和反向

来自分类Dev

simple_form和自定义验证消息

来自分类Dev

Polymer CoreInput设置自定义验证消息和反向

来自分类Dev

Npm提示-自定义验证和多行消息?

来自分类Dev

如何使用新的错误消息创建自定义MaxLength和Required验证,逻辑保持不变

来自分类Dev

如何使用新的错误消息创建自定义MaxLength和Required验证,逻辑保持不变

来自分类Dev

角形式验证:即使使用自定义输入指令的ng-required = false,也将设置$ error.required

来自分类Dev

添加指令以验证输入、Angular2 和打字稿

来自分类Dev

如何使用打字稿在猫鼬模型中定义自定义查询助手?

来自分类Dev

如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

来自分类Dev

如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

来自分类Dev

用于表单验证的自定义指令

来自分类Dev

自定义验证-“空白”指令

来自分类Dev

打字稿:如何在.d.ts文件中声明自定义Map和Array

来自分类Dev

如何使用自定义消息设置Joi验证?

来自分类Dev

使用Focusout设置自定义验证程序消息

Related 相关文章

  1. 1

    自定义useInput钩子和打字稿错误

  2. 2

    带有复选框网格的打字稿,带有管道分隔值和自定义验证规则

  3. 3

    Axios打字稿自定义AxiosRequestConfig

  4. 4

    ANgularjs:ng-repeat和嵌套的自定义指令

  5. 5

    带templateUrl和ng-repeat的自定义指令

  6. 6

    带templateUrl和ng-repeat的自定义指令

  7. 7

    ANgularjs:ng-repeat和嵌套的自定义指令

  8. 8

    使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

  9. 9

    使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

  10. 10

    使用自定义指令与angularjs进行验证

  11. 11

    使用自定义指令与angularjs进行验证

  12. 12

    在自定义指令中使用ng-blur

  13. 13

    使用ng-repeat嵌套自定义指令

  14. 14

    Polymer CoreInput设置自定义验证消息和反向

  15. 15

    simple_form和自定义验证消息

  16. 16

    Polymer CoreInput设置自定义验证消息和反向

  17. 17

    Npm提示-自定义验证和多行消息?

  18. 18

    如何使用新的错误消息创建自定义MaxLength和Required验证,逻辑保持不变

  19. 19

    如何使用新的错误消息创建自定义MaxLength和Required验证,逻辑保持不变

  20. 20

    角形式验证:即使使用自定义输入指令的ng-required = false,也将设置$ error.required

  21. 21

    添加指令以验证输入、Angular2 和打字稿

  22. 22

    如何使用打字稿在猫鼬模型中定义自定义查询助手?

  23. 23

    如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

  24. 24

    如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

  25. 25

    用于表单验证的自定义指令

  26. 26

    自定义验证-“空白”指令

  27. 27

    打字稿:如何在.d.ts文件中声明自定义Map和Array

  28. 28

    如何使用自定义消息设置Joi验证?

  29. 29

    使用Focusout设置自定义验证程序消息

热门标签

归档