Custom validation directive using ng messages and typescript

问题

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.

The error I am seeing is :

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

My code looks like this:

Validation directive:

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

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

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)

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

回答1:

The ngMessages module requires a separate angular-messages.js file. I don't see your main app index.html page where you load script files, but check to make sure the one you need is included. If not, you'll see this message. Information on downloading and CDN available in the ngMessages Docs

回答2:

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

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

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)

来源：https://stackoverflow.com/questions/32421546/custom-validation-directive-using-ng-messages-and-typescript

标签

angularjs

validation

angularjs-directive

typescript

ng-messages