user3454799
user3454799

Reputation: 93

How to Disallow single decimal point(.)in input field with type number in angular js

How can I show the error if the user write decimal point(.) in input field type number. I am using ng-pattern but it didn't validate when single full stop is entered.

For ex. If i entered number"9988587146." it didn't shows error or call ng-pattern function if i write two dots then it shows error . for Ex "9988587146.."Everthing working fine all validationS except single dot (.) in input field HTML

<input type="number" name="number" class="form-control" placeholder="Phone Number" ng-maxlength="10" ng-minlength="10" limit-to="10" step="0" ng-pattern="checkPattern()" ng-model="user.number"   required/>

My check Pattern function .

var isnum = /^[0-9]{10,10}$/.test($scope.user.number);
return isnum;

Upvotes: 1

Views: 3687

Answers (1)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

There are two things you need to change in your code:

  1. ngPattern does not accept a function as its value. Only regex or a string that evaluates to a regex are valid values.
  2. Like @Wiktor Stribiżew suggested in the comments, input with type number dose not work with pattern validation. Only text, search, tel, url, email or password will let you validate using a pattern. Since you try to validate a phone number anyway, I suggest you use type tel.

In your template, use:

<input type="tel" ng-pattern="checkPattern" name="number" class="form-control" placeholder="Phone Number" ng-maxlength="10" ng-minlength="10" limit-to="10" step="0" ng-model="user.number" required/>

And in the controller:

$scope.checkPattern = /^[0-9]{10,10}$/;

Upvotes: 2

Related Questions