使用纳克消息和打字稿自定义验证指令 [英] Custom validation directive using ng messages and typescript

问题描述

我试图建立已指令自定义验证模块，并显示他们使用NG的消息

I'm trying to build a module that has directive for custom validations and showing them using ng-messages

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

The validations are done via regex.

我看到的错误是：

错误：[$编译：ctreq]！控制器ngM​​essages，由指令'ngMessage要求，无法找到

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

我的code是这样的：

My code looks like this:

确认指令：

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>

我的应用程序模块：

My app module:

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

我的控制器太长，张贴在这里，但它没有ngMessages的注入（我试图用静态注射，以及 - >没有工作）

My controller is too long to post here, but it has no inject of ngMessages (I tried using static inject as well --> didn't work)

显然，我做错了什么，但我不知道是什么。
（这是一个持续的问题我以前有<一个href=\"http://stackoverflow.com/questions/32376986/error-in-directive-implementation-of-regex-test-as-attribute-validations-type/32377636?noredirect=1#comment52630107_32377636\">here)

Clearly I am doing something wrong, but I don't know what. (this is a continue to a problem I had before here)

推荐答案

最后错误是在模板文件（errorMessages.html）。在那里我有：

Eventually the error was on the template file (errorMessages.html). In there I had:

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

，因为他一直在寻找控制器'NG的消息'的存在我的网页上，而不是在模板上造成的误差。
我删除了该指令使用的模板，并用NG的消息，包括我的HTML。 （注意从版本变化> 1.4.0b，它必须是一个单独的元件上的）

Which caused the error because he was looking for the controller 'ng-messages' which exist on my page, but not on the template. I removed the use of template from the directive, and used ng-messages-include in my html. (be aware of the change from version > 1.4.0b that it must be on a separate element)

这篇关于使用纳克消息和打字稿自定义验证指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！