AngularJS - тип ввода = число, не очищаемое для не числа (NaN)

Тип ввода «Очистить номер» не работает для номера «e»

Когда я очищаю поле ввода с помощью ввода eee в числовом типе, оно не очищается. Любые другие входные числа очищаются. Проверьте JSFiddle. Любые подсказки будут оценены.

http://jsfiddle.net/2ankx9up/

<div ng-app="app">
   <div ng-controller="MainCtrl">
    <input type="number" class="form-control" data-ng-model="searchAll"> 
    </input> 
    <a class="clear" href="" data-ng-click="clearSearch()">X</a>
   </div>
</div>

var app = angular.module("app", []);
 app.controller("MainCtrl", function ($scope) {
    $scope.searchAll = "";
    $scope.clearSearch = function () {
       $scope.searchAll = "";
    };
});

angularjs angularjs-ng-model angularjs-scope
person Rocky    schedule 01.08.2018    source источник
comment
Почему вы разрешаете хранить нечисловые значения в searchAll? В документации для input[number] указано, что AngularJS выдаст ошибку ниже капот, если связанное значение не является number. Если вам все еще нужен обходной путь, вы всегда можете изменить средства форматирования и парсеры привязки — jsfiddle.net/1cxbnhv0   -  person miqh    schedule 02.08.2018
comment
Ты прав. Я надеялся увидеть что-то из коробки, чтобы справиться с этим делом. Я всегда могу обойти или иметь свою собственную реализацию   -  person Rocky    schedule 03.08.2018

Ответы (1)


arrow_upward
2
arrow_downward

Директива ng-model не может очистить содержимое элемента <input type="number">, когда это содержимое анализируется на NaN (не число). Это может произойти, когда пользователь вставляет недопустимый контент или просто набирает «ееее».

Одним из исправлений является добавление пользовательской директивы:

app.directive('clearNan', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$formatters.push(function(value) {
        if (!value) elem.val(null);
        return value;
      });
    }
  };
})

Использование:

<input type="number" clear-nan ng-model="x" />

ДЕМО

angular.module('numfmt-error-module', [])
.directive('clearNan', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$formatters.push(function(value) {
        if (!value) elem.val(null);
        return value;
      });
    }
  };
})
.run(function($rootScope) {
  $rootScope.typeOf = function(value) {
    return typeof value;
  };
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="numfmt-error-module">
  <input clear-nan type="number" ng-model="x" />
  <br>
  {{ x }} : {{ typeOf(x) }}
  <br>
  <button ng-click="x=''">Clear input</button>
</body>

person georgeawg    schedule 02.08.2018