CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Kamaldeep Singh
Kamaldeep Singh

Reputation: 907

ng-minlength and ng-pattern preventing binding

I have defined an input feild as

<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^]))/">
</form>

And defined user in controller as

$scope.user{};

Now when I bind user.username value in HTML, its preventing it.

<p ng-if="user.username.length > 0">Display True</p>

Even if I simply bind its value in HTML as

{{user.username}}

Its not being displayed.

Now if I remove ng-pattern from input field as :-

<input type="text" ng-minlength="8" ng-maxlength="64" ng-model="user.username">

then only its binding and that too after satisfying ng-minlength="8" condition. Means '12345678' is displayed and '1234567' not.

One more issue is there i.e. if I use ng-pattern then ng-minlength validation is not working.

<p ng-if="signUpForm.username.$error.minlength">Please enter minimum length</p>

Upvotes: 0

Views: 1168

Answers (1)

Victor Tan
Victor Tan

Reputation: 11

You can check the form.$viewValue.length instead of the model's length

for example:

<p ng-if="signUpForm.username.$viewValue.length">Display True</p>

here's a solution I found:
How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?

Upvotes: 1

Related Questions