Why doesn't AngularJS validation function properly with input elements of type "number"?

Question

Why doesn't AngularJS validation function properly with input elements of type "number"?

Struggling with Angularjs validation here. Ng-pattern seems to work fine only when the input type is text. However, when the input type is number, ng-pattern doesn't seem to work, although required, min, and max attributes still function.

<input type="number" name="number" ng-model="myNumber" ng-pattern="reg" required />

https://jsfiddle.net/o4hr219m/

I attempted adding the attr[novalidate] for the form to prevent browser validation, but it didn't have any effect.

Does anyone have alternative solutions?

Your assistance would be much appreciated.

Thank you.

javascript angularjs html

Answer 1

Answer №1

When setting the type="number", it is recommended to use $error.number instead of $error.pattern in Angular. This is because Angular will not bind the value to the model until it is deemed valid.

<span ng-show="myForm.number.$error.number">Invalid number</span>

For a visual demonstration, refer to the code snippet below:

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.reg = /^[0-9]*$/;

});

.error {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <form name="myForm">
      <label>Value Number</label>
      <input type="number" name="number" ng-pattern="reg" ng-model="value.number" /><span class="error" ng-show="myForm.number.$error.number">Invalid number</span>
      <br/>Current error for Value Number
      <pre>{{myForm.number.$error | json}}</pre> 

      <hr/>

      <label>Value Text</label>
      <input type="text" name="text" ng-pattern="reg" ng-model="value.text" /><span class="error" ng-show="myForm.text.$error.pattern">Invalid text</span>
      <br/>Current error for Value Text
      <pre>{{myForm.text.$error | json}}</pre> 
      <hr/>

      <input type="submit" value="Submit" ng-disable="myForm.$invalid" />
    </form>

  </div>
</div>

Answer 2

When setting the type="number", it is recommended to use $error.number instead of $error.pattern in Angular. This is because Angular will not bind the value to the model until it is deemed valid.

<span ng-show="myForm.number.$error.number">Invalid number</span>

For a visual demonstration, refer to the code snippet below:

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.reg = /^[0-9]*$/;

});

.error {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <form name="myForm">
      <label>Value Number</label>
      <input type="number" name="number" ng-pattern="reg" ng-model="value.number" /><span class="error" ng-show="myForm.number.$error.number">Invalid number</span>
      <br/>Current error for Value Number
      <pre>{{myForm.number.$error | json}}</pre> 

      <hr/>

      <label>Value Text</label>
      <input type="text" name="text" ng-pattern="reg" ng-model="value.text" /><span class="error" ng-show="myForm.text.$error.pattern">Invalid text</span>
      <br/>Current error for Value Text
      <pre>{{myForm.text.$error | json}}</pre> 
      <hr/>

      <input type="submit" value="Submit" ng-disable="myForm.$invalid" />
    </form>

  </div>
</div>

Answer 3

Answer №2

Check out the updated fiddle here: https://jsfiddle.net/o4hr219m/5/

JS

angular.module('pmsApp', []).controller('testCtrl',function($scope){
    $scope.reg= /^[0-9]\\d*$/;
})

HTML

<input ng-model="number" type="number" name="number" ng-pattern="reg"/>

In relation to your fiddle:

The module was not properly defined and ng-app was not utilized
Angular was loaded on load (should be placed in head or body instead)
No ng-model was added to the input, so validation will not function correctly
Avoid wrapping your regular expression with quotes

Answer 4

Check out the updated fiddle here: https://jsfiddle.net/o4hr219m/5/

JS

angular.module('pmsApp', []).controller('testCtrl',function($scope){
    $scope.reg= /^[0-9]\\d*$/;
})

HTML

<input ng-model="number" type="number" name="number" ng-pattern="reg"/>

In relation to your fiddle:

The module was not properly defined and ng-app was not utilized
Angular was loaded on load (should be placed in head or body instead)
No ng-model was added to the input, so validation will not function correctly
Avoid wrapping your regular expression with quotes

Why doesn't AngularJS validation function properly with input elements of type "number"?

Answer №1

Answer №2

Similar questions

Incorporating React.js into HTML DOM Elements

React-Image-Annotate encountered an issue: SyntaxError - The import statement cannot be used outside a module

Transfer an Array of Objects containing images to a POST API using Angular

Issue with Lazy Loading in Angular 4 Universal

The error stating that document.getElementById(...) is null has occurred within RSForms due to a TypeError

What is the best way to create a more compact Select component in React?

Ways to extract a specific line of text from HTML code

Assigning a unique identifier to each table row when iterating through a collection using

Challenge with Alignment of Fields in Bootstrap's Horizontal Form

Utilizing Selenium IDE and XPath to confirm that a checkbox is selected only when the associated label contains certain text

Hide jquery scroll bar

Button click causing TextField to print incorrectly

Reduce the noise from different versions by utilizing package-lock.json

Eliminate jQuery's delayed blinking effect with the use of an event

setTimeout executes twice, even if it is cleared beforehand

Load options from server directory using PHP jQuery AJAX

Angular ngView not displaying content on the page

Add the item to a fresh array using the Ajax function

Incorporate the value of a JQuery variable within an HTML form

What is the best way to include overflow-hidden in the image displayed by the tailblock component?