Проверка пользовательской директивы с помощью ngMessages
Я пишу веб-приложение в angularjs и используя angular материал (не уверен, что это относится к вопросу) и 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>
Кажется, я не могу получить сообщение, когда моя пользовательская проверка правильности недействительна. Как мне это сделать?
Благодарим за помощь заранее.
Ответы
Ответ 1
Вы очень близки, просто добавьте некоторую проверку в свою 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 будет отображаться на основе имени функции.
Дополнительная информация о $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
Ответ 2
Существует более компактная альтернатива решению Huy:
link: function($scope, $element, $attrs, ngModel){
//validation true or false
ngModel.$setValidity('required',validation);
ngModel.$setValidity('customdir',validation);
}