AngularJS Input [type = "number"] Проверка позволяет вводить только цифры

Question

У меня есть поле ввода с запросом номера, и я пытаюсь сделать это, чтобы убедиться, что пользователь не набирает буквы или цифры это недопустимо.

Это мой код до сих пор:

<form name="userForm" novalidate> 
     Calories Needed : 
     <input type="number" min="0" ng-model="user.calories"> 
    </form> 

Я искал способ с использованием AngularJS, но не имели никакой удачи. Я столкнулся с сообщениями, где они предложили создать директиву, но я искал другую технику. Я все еще новичок, поэтому я не хочу просто использовать код без понимания того, что именно происходит.

Answer 1

Вам повезло, у меня есть директива, в которой я использую всюду для этого экземпляра.

Это так же просто, как хлопание <input valid-number /> на входе. Вуаля!

angular.module('yourApp') 
.directive('validNumber', function() { 
    return { 
     require: '?ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      // make sure we're connected to a model 
      if (!ngModelCtrl) { 
       return; 
      } 

      ngModelCtrl.$parsers.push(function (val) { 
       // this is a test for whether it's undefined (from textbox) 
       // or null when using type="number" 
       if (val === undefined || val === null) { 
        val = ''; 
       } 

       // here we try and clean it to make sure it's only numbers 
       var clean = val.toString().replace(/[^0-9]+/g, ''); 

       // if a letter/etc got in there, set the model to the "cleaned" number value 
       if (val !== clean) { 
        ngModelCtrl.$setViewValue(clean); 
        ngModelCtrl.$render(); 
       } 
       return clean; 
      }); 

      // this is to test for "32" = SPACEBAR 
      // and "101" = e (Chrome for some reason let's E go through in type="number" 
      element.bind('keypress', function (e) { 
       var code = e.keyCode || e.which; 

       // Remove code === 101 part if you want 'e' to go through 
       if (code === 101 || code === 32) { 
        e.preventDefault(); 
       } 
      }); 
     } 
    }; 
}); 

Answer 2

Вы хотите прочитать о форме угловых в validation- tutorial

Это так просто, как добавление «требуется» на свой вход, и «NOVALIDATE» к элементу формы:

<form name="testForm" novalidate> 
     <input type="number" required name="numberinput" class="form-control" ng-model="someNumber"> 
</form> 

plunker