I'm writing a directive for validation that accepts the name of an element in a form and prints error messages based on the value of the element.
This is an example (live demo link here)
<form name="form" >
<input type="text" name="inp" ng-model="myval" ng-minlength="3">
<oversee watched="form.inp">
</form>
The directive:
directive("oversee",function () {
return {
restrict: 'E',
scope: {
watched: '='
},
template: '<div ng-show="watched.$invalid">Error</div>',
link: function (scope, elm) {
console.log(scope.watched);
}
};
}
Here's the thing. I want to change the error message to reflect the current length of the input element it is watching. (Like how Stackoverflow does in comments)
5 more to go...
So I have to bind to the element and get it's value on every keyup
Notice - I can't use: {{myval.length}} for this because the model is not updated while the form/input is invalid.
Hope I made my question clear.
Thanks!
Here is a working example, you can use $viewValue instead of model note: you also need to take care of form error messages
angular.module("angtemp", [])
.controller("first", firstCtrl)
.directive("oversee",function () {
var LIMIT = 20;
return {
restrict: 'E',
scope: {
watched: '=',
val: '='
},
template: '<div ng-show="countToType">{{countToType}} more to go...</div>',
link: function (scope, elm) {
scope.$watch('val',function(newVal,oldVal){
if(!newVal) return;
scope.countToType = LIMIT-newVal.length;
});
}
};
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다