CODEWITHSUNDEEP
javascriptangularjs
Unsparing
Unsparing

Reputation: 7653

Angular: Cannot read property 'length' of undefined when using ng-minlength

I have this issue when I start typing in the input and until the validation is checked ng-minlength and ng-maxlength are ok I don't get the length property which in returns doesn't allow me to show the user the amount of characters he has left:

<label>Subject</label>
<input type="text" name="subject" required
       ng-minlength="15" ng-maxlength="120" ng-model="subject"/>
<div ng-messages="form.subject.$error" ng-if="form.subject.$touched" class="ng-cloak">
<div ng-message="required" class="angular-error">Subjectis required.</div>
<div ng-message="minlength" class="angular-error">Minimum Length of 15 Characters</div>
</div>

<div class="ng-cloak">{{subjectMaxLength - subjectLength}} </div>

Controller:

$scope.subjectMaxLength = 90;
$scope.$watch('subject', function() {
   $scope.subjectLength = $scope.subject.length;
 });

After it is valid and exceeds 15 chars the counting is correct but before that it is freezing.

Any suggestions ?

Upvotes: 2

Views: 983

Answers (1)

user2752661
user2752661

Reputation:

The model value is only assigned after the ng-minlength / ng-maxlength requirements are met. Before that, the value will always be undefined.

See the doc example (you can test it live on the example form): https://docs.angularjs.org/api/ng/directive/input

If you are interested in knowing why this is the case, i would recommond reading the page for ngModel.NgModelController, especially the $validate(); section.

Upvotes: 1

Related Questions