javascript 使用 ngMessages 验证自定义指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31127532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validate custom directive using ngMessages
提问by northsideknight
I writing a web app in angularjs and using angular material(not sure if that is relevant to the question) and ngMessagesto provide feedback for invalid inputs to the user.
我在 angularjs 中编写了一个 Web 应用程序，并使用angular 材料（不确定这是否与问题相关）和ngMessages为用户提供无效输入的反馈。
Usually, for validation of directives provided, I can validate in a way similar to:
通常，对于提供的指令的验证，我可以通过类似于以下的方式进行验证：
<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>
But if I created my own custom directive...
但是如果我创建了自己的自定义指令......
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
}
};
}
and include it in my input...
并将其包含在我的输入中...
<input required ng-customdir name="myInput" ng-model="someModel">
I know it validates the input, because if the input is invalid based on my custom directive's validation, the field turns red and the $invalid value is set to true, but I do not know how to make a message appear with ngMessages based on when this happens.
我知道它会验证输入，因为如果根据我的自定义指令的验证输入无效，则该字段变为红色并且 $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>
I cannot seem to get a message to appear when my custom directive validation is invalid. How do I do this? Thanks for the help in advance.
当我的自定义指令验证无效时，我似乎无法收到一条消息。我该怎么做呢？我在这里先向您的帮助表示感谢。
回答by Huy Hoang Pham
You are getting very close, just add some validation in your linkfunction:
您已经非常接近了，只需在您的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
};
}
When the model changes, AngularJS will call all the validate functions in $validatorsobject. The ng-message will display based on the function name.
More infomation about the $validators:
当模型发生变化时，AngularJS 会调用$validatorsobject 中的所有验证函数。ng-message 将根据函数名称显示。有关 $validators 的更多信息：
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html
http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html
回答by Adam Bubela
There is more compact alternative to Huy's solution:
Huy 的解决方案有更紧凑的替代方案：
link: function($scope, $element, $attrs, ngModel){
//validation true or false
ngModel.$setValidity('required',validation);
ngModel.$setValidity('customdir',validation);
}
