我正在尝试构建一个具有自定义验证指令并使用ng-messages显示它们的模块
验证是通过正则表达式完成的。
我看到的错误是:
错误:[$ compile:ctreq]指令' ngMessage'所需的控制器' 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(我也尝试使用静态注入 - &gt;没有工作)
显然我做错了什么,但我不知道是什么。 (这是我在here)
之前遇到的问题答案 0 :(得分:1)
ngMessages模块需要单独的angular-messages.js文件。我没有看到您加载脚本文件的主应用程序index.html页面,但请检查以确保包含您需要的那个。如果没有,您将看到此消息。有关下载和CDN的信息,请参见ngMessages Docs
答案 1 :(得分:0)
最终错误发生在模板文件(errorMessages.html)上。我在那里:
<span ng-message="required">Required</span>
导致错误的原因是他正在寻找我页面上存在但不在模板上的控制器'ng-messages'。 我从指令中删除了模板的使用,并在我的html中使用了ng-messages-include。 (请注意版本&gt; 1.4.0b的更改,它必须在单独的元素上)