2017-02-22 23 views
1

С followinh HTML, это не возможно, чтобы подтвердить шаг:Подтвердить шаг внутри ввода типа числа

<form name="myForm"> 
<input type="number" name="test" min={{min}} max={{max}} step={{step}}> 
<div class="error-popup" ng-if="myForm.test.$touched && myForm.test.$valid"> 
    <p>Invalid number</p> 
</div> 
</form> 

Например, если $scope.min=3, $scope.max=9 и $scope.step=0.3, myForm.test.$valid остается верным для значений, как 3.4 или 4.3, тогда как это не должно. Итак, я думаю об использовании ng-pattern. Возможно ли построить такой ng-pattern, который позволяет использовать только значения min+x*step или я должен создать для этого директиву?

+0

Используйте 'нг-min',' нг-max' и 'нг-step'. – Tushar

+0

Нет никакой разницы –

ответ

0

Вы пропустили ng-model для поля ввода. Пожалуйста, включите это.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
     <form name="myForm"> 
 
      <input ng-model="yourValue" type="number" name="test" min={{min}} max={{max}} step={{step}}> 
 
     </form> 
 
     <h1>Validity: {{myForm.test.$valid}}</h1> 
 
     <div class="error-popup" ng-if="myForm.test.$touched && myForm.test.$valid"> 
 
      <p>Invalid number</p> 
 
     </div> 
 
    </div> 
 

 
    <script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function ($scope) { 
 
      $scope.min = 3; 
 
      $scope.max = 10; 
 
      $scope.step = 2; 
 
     }); 
 
    </script> 
 

 

 
</body> 
 

 
</html>