2016-11-15 76 views
1

我无法将输入类型编号限制为正数。正如那篇文章中所述:HTML5: number input type that takes only integers?我是而不是寻找step =“1”的答案,因为它允许用户键入{e。}。限制输入类型编号

我使用的是指令我在相关的职位发现(How do I restrict an input to only accept numbers?),而我只是增加了一些控制台日志和一个toString():

它的正常工作,当输入类型是文本,但它是当输入类型是数字时我从来没有打过电话,而且输入'e'','或'。'。

任何想法,我在这里失踪?我想使用输入类型=数字来启用箭头以使用角度材质选择一个值。

function restrictInput($mdDialog) { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attr, ctrl) { 
     function inputValue(value) { 
     console.log("hello ! :", value) 
     var val = value.toString(); 
     console.log("goodbye ! : ", val) 
     if (val) { 
      var digits = val.replace(/[^0-9]/g, ''); 
      console.log("digits :", digits) 
      console.log("val : ", val) 
      if (digits !== val) { 
      ctrl.$setViewValue(digits); 
      ctrl.$render(); 
      } 
      return parseInt(digits, 10); 
     } 
     return undefined; 
     } 
     ctrl.$parsers.push(inputValue); 
    } 
    }; 
} 

HTML是这样的:

<md-input-container flex class="md-input-has-placeholder"> 
    <label>Années d'expérience stage inclus</label> 
    <input 
     type="number" 
     required 
     step="1" 
     restrict-input 
     min="0" 
     name="Expérience stage" 
     ng-model="model"> 
    <div ng-messages="form['Expérience stage'].$error" md-auto-hide="false"> 
     <div ng-message="required">Requis</div> 
    </div> 
</md-input-container> 

编辑

使用getter setter方法(NG-模型选项= “{getterSetter:真正}”)工作在这里完美。

+0

为$ scope.model写一个手表并限制输入并将其替换为 – M14

+2

''是数字值的开始。那么你只需要检查它不是一封信。另见http://stackoverflow.com/questions/7372067/is-there-any-way-to-prevent-input-type-number-getting-negative-values – Maxime

回答

2

如果只需要限制输入类型“number”只接受整数,则不需要使用指令。

<input type="number" ng-pattern="/^(0|[1-9][0-9]*)$/" > 

你能在应用程序中输入上面的代码吗?

这只会接受数字。

+0

更简单的模式将是'/^[0-9] + $ /' – casraf

+0

模式在数字为 –

+0

时不起作用它正在为我工​​作。你可以在这里看到demo首先输入的是答案模式 - http://jsfiddle.net/ExpertSystem/63mwL/ –