CODEWITHSUNDEEP
javascriptregexangularjs
zelocalhost
zelocalhost

Reputation: 1183

Bad length count when ng-minlength and ng-pattern are define in angularjs

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

Upvotes: 1

Views: 2203

Answers (3)

user3423448
user3423448

Reputation: 75

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.

Upvotes: 4

runTarm
runTarm

Reputation: 11547

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

Upvotes: 2

Michael Kang
Michael Kang

Reputation: 52847

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" />

Upvotes: -1

Related Questions