Angular.JS - 仅允许输入数字字段

Question

我正在尝试理解一种带有角度的方式，我只能让用户输入一个不超过24的数字或在我的其他输入60中表示小时和分钟。

            <input type="number"
                   placeholder="HH"
                   ng-minlength="2"
                   ng-maxlength="2"
                   required
                   ng-model="session.timeHH">

            <input type="number"
                   placeholder="mm"
                   ng-minlength="2"
                   required
                   ng-maxlength="2"
                   ng-model="session.timeMM">

这是我目前的HTML。

用户可以在小时输入输入99之类的数字，这显然是错误的。我正在寻找一种在提交之前验证或阻止用户的方法，只能输入最多24小时和59分钟的数字。

甚至点击提交按钮就足够了。

Answer 1

没有角度，但为什么不使用HTML属性？ Angular对于这些很有用，你可以检查表单的$ valid属性，以确保满足约束条件。

<input type="number" min="0" max="24" step="1">

Answer 2

因为您已经在使用type="number"

，所以只需HTML5

<input type="number" name="hours" min="1" max="24">

请务必同时验证服务器端的输入。

Answer 3

如果您想限制数字，请使用下拉菜单，否则您必须使用原生的最小和最大属性进行验证。

Answer 4

为什么不将输入的类型属性用作时间，这将在现代浏览器和手机上打开时间选择器

https://plnkr.co/edit/TAwugxjQHcMtJONQJgWA?p=preview

         <input type="time"
               placeholder="HH:MM"
               required
               ng-model="session.timeHH">

Answer 5

您可以使用一些提供遮罩功能的角度遮罩库。

您可以使用的是angular-input-masks，ui-mask或ngMask。