使用 ngMessages 验证自定义指令
Validate custom directive using ngMessages
我在 angularjs 中编写了一个网络应用程序,并使用 angular material (not sure if that is relevant to the question) and ngMessages 向用户提供无效输入的反馈。
通常,为了验证所提供的指令,我可以采用类似于以下的方式进行验证:
<md-input-container>
<input required name="myInput" ng-model="someModel">
<div ng-messages="formName.myInput.$error">
<div ng-message="required">This field is required.</div>
</div>
</md-input-container>
但是如果我创建了自己的自定义指令...
moduleName.directive('ngCustomdir', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, $element, $attrs, ngModel){
//do some validation
return validation; //<--true or false based on validation
}
};
}
并将其包含在我的输入中...
<input required ng-customdir name="myInput" ng-model="someModel">
我知道它会验证输入,因为如果根据我的自定义指令验证输入无效,该字段会变为红色并且 $invalid 值设置为 true,但我不知道如何显示消息根据发生这种情况的时间使用 ngMessages。
<div ng-messages="formName.myInput.$error">
<div ng-message="required">This field is required.</div>
<div ng-message="customdir">This is what I need to appear.</div>
</div>
当我的自定义指令验证无效时,我似乎无法显示消息。我该怎么做呢?
提前感谢您的帮助。
您已经非常接近了,只需在您的 link
函数中添加一些验证:
link: function($scope, $element, $attrs, ngModel){
ngModel.$validators.required = function(modelValue) {
//true or false based on required validation
};
ngModel.$validators.customdir= function(modelValue) {
//true or false based on custome dir validation
};
}
当模型改变时,AngularJS 将调用$validators
对象中的所有验证函数。 ng-message 将根据函数名称显示。
有关 $validators 的更多信息:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html
Huy 的解决方案有更紧凑的替代方案:
link: function($scope, $element, $attrs, ngModel){
//validation true or false
ngModel.$setValidity('required',validation);
ngModel.$setValidity('customdir',validation);
}
我在 angularjs 中编写了一个网络应用程序,并使用 angular material (not sure if that is relevant to the question) and ngMessages 向用户提供无效输入的反馈。
通常,为了验证所提供的指令,我可以采用类似于以下的方式进行验证:
<md-input-container>
<input required name="myInput" ng-model="someModel">
<div ng-messages="formName.myInput.$error">
<div ng-message="required">This field is required.</div>
</div>
</md-input-container>
但是如果我创建了自己的自定义指令...
moduleName.directive('ngCustomdir', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, $element, $attrs, ngModel){
//do some validation
return validation; //<--true or false based on validation
}
};
}
并将其包含在我的输入中...
<input required ng-customdir name="myInput" ng-model="someModel">
我知道它会验证输入,因为如果根据我的自定义指令验证输入无效,该字段会变为红色并且 $invalid 值设置为 true,但我不知道如何显示消息根据发生这种情况的时间使用 ngMessages。
<div ng-messages="formName.myInput.$error">
<div ng-message="required">This field is required.</div>
<div ng-message="customdir">This is what I need to appear.</div>
</div>
当我的自定义指令验证无效时,我似乎无法显示消息。我该怎么做呢? 提前感谢您的帮助。
您已经非常接近了,只需在您的 link
函数中添加一些验证:
link: function($scope, $element, $attrs, ngModel){
ngModel.$validators.required = function(modelValue) {
//true or false based on required validation
};
ngModel.$validators.customdir= function(modelValue) {
//true or false based on custome dir validation
};
}
当模型改变时,AngularJS 将调用$validators
对象中的所有验证函数。 ng-message 将根据函数名称显示。
有关 $validators 的更多信息:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html
Huy 的解决方案有更紧凑的替代方案:
link: function($scope, $element, $attrs, ngModel){
//validation true or false
ngModel.$setValidity('required',validation);
ngModel.$setValidity('customdir',validation);
}