1

After two hours of researches and attempts i was not able to clear a number input field when an invalid value is inserted. I've already tried setting ng-model both null, undefined and '' but none is working.

Only Firefox has this problem, i've tested the same on latest versions of Chrome and IE.

My simplified code is:

HTML

<div ng-controller="MyCtrl">
  <form name="frmToClear">
    <input type="number" name="numField" ng-model="numberModel">
  </form>
  <button ng-click="clearInput()">Clear input</button>
</div>

Javascript

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

function MyCtrl($scope) {
    $scope.numberModel = null;

    $scope.clearInput = function() {
        $scope.numberModel = null;
    };
}

Here is the fiddle where I've also added a "setZero" function to show that changing model to a valid not-null input is working well: https://jsfiddle.net/McGiogen/vhx87yq6/

To reproduce

the error just open the link with Firefox, write any non-numeric string in the input field and press "Clear input" button. Nothing will happen.

Browsers tested:

  • Firefox 40.0.3
  • Firefox dev edition 42.0a2
  • Chrome 45.0.2454.93
  • IE 11.0.9600.17959

3 Answers 3

0

you can try to use an input text and validate user input through a custom directive.

See this link for a better explanation:

How to allow only a number (digits and decimal point) to be typed in an input?

if you want to allow + and - modify the regex with something like that:

[^0-9\-\.\+]
1
  • 1
    I think this is a Firefox bug so, as said by @cullimorer, this can be a correct workaround to temporary solve this problem.
    – McGiogen
    Sep 18, 2015 at 13:05
0

There are a number of issues between cross-browsers when it comes to input fields. Here's an article that can give you all the information you require.

https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/

I would solve the problem by displaying a message to the user telling them to enter a valid number and then using Angular's built in validation to prevent incorrect input.

<div ng-controller="MyCtrl">
  <form name="frmToClear">
    <input required type="number" name="numField" ng-model="numberModel">
  </form>
  <div ng-show="!frmToClear.$valid">Please enter a valid number only</div>
  <button ng-click="clearInput()" ng-disabled="!frmToClear.$valid">Clear input</button>
  <button ng-click="setZero()" ng-disabled="!frmToClear.$valid">Set zero</button>
</div>
0

put '' in place of null

function MyCtrl($scope) {
    $scope.numberModel = null;

    $scope.clearInput = function() {
        $scope.numberModel = '';
    };

    $scope.setZero = function() {
       $scope.numberModel = 0;
    };
}
3
  • I'm sorry but I've already tried this solution and it is not working
    – McGiogen
    Sep 18, 2015 at 10:58
  • It doesnt clear if the input has a string and not number cause it has error but if you have a correct number it set it to empty.
    – z0r0
    Sep 18, 2015 at 11:07
  • I checked it on fiddle
    – z0r0
    Sep 18, 2015 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.