When i define a ng-minlength and ng-pattern, this code doesn't work good :
<span class="myForm_textarea" ng-show="myFormZR.textarea.$dirty"><br /><br />characters : {{0 + myForm.textarea.length}} writed / 500 limit</span>
count is go to 0 when a string matche the regex or count is 0 until the minlength is reached. i made a plunkr for that : http://plnkr.co/edit/R6kGJmlQ4TgGf16kAmYi?p=preview
Here's a little workaround that I started using for this specific problem within forms.
Instead of using myForm.textarea.length try using myForm.textarea.$viewValue.length. This way, validation is tracking your model and you still have an accurate way to keep track of your character count.
In angularjs 1.2.x, you could workaround the problem by writing a custom directive to restore the invalid value.
app.directive('allowInvalid', function () {
return {
restrict: 'A',
require: 'ngModel',
priority: 1, // force the postLink below to run after other directives
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (viewValue) {
return (viewValue === undefined) ? modelCtrl.$viewValue : viewValue;
});
}
}
});
and put it in the textarea:
<textarea ng-model="myForm.textarea" ng-required="true" ng-minlength="5" ng-maxlength="500" ng-pattern="textareaRegex" allow-invalid></textarea>
Example plunker: http://plnkr.co/edit/H0YePKFwkvaBZgnxCRMB?p=preview
If you want to limit the maximum characters in the textarea, you can use maxlength attribute (in addition to the ng-maxlength):
<textarea ng-maxlength="500" maxlength="500" />
