输入中缺少步骤属性错误消息答案

【问题标题】：Missing step attribute error message in input输入中缺少步骤属性错误消息
【发布时间】：2016-04-25 09:14:33
【问题描述】：

Angular js 确实为几个 html5 引入的输入属性提供了验证，例如 min 或 required，包括 .

<input type="number" name="input1" id="input1" min="0" 
        ng-model="$ctrl.input1"ng-required />
<div ng-messages="formname.input1.$error" class="em-messages">
    <div ng-message="required">This value is required</div>
    <div ng-message="min">You must not use negative values</div>
</div>

对于step 属性，这样的验证是有效的，但默认情况下不会显示任何错误消息，那么最简单的实现方法是什么（例如step="0.001"？

<input type="number" name="input1" id="input1" min="0" step="0.001"
        ng-model="$ctrl.input1"ng-required />
<div ng-messages="formname.input1.$error" class="em-messages">
    <div ng-message="required">This value is required</div>
    <div ng-message="min">You must not use negative values</div>
    <div ng-message="step">You can work with 0.001 steps</div>
</div>

【问题讨论】：

标签： angularjs validation input angular-material

【解决方案1】：

简单，只需使用这样的正则表达式：

<input type="number" name="input1" id="input1" min="0" step="any"
        ng-model="$ctrl.input1"ng-required 
         ng-pattern="/^[0-9]\d*((.|,)\d{1,3})?$/" />
<div ng-messages="formname.input1.$error" class="em-messages">
    <div ng-message="required">This value is required</div>
    <div ng-message="min">You must not use negative values</div>
    <div ng-message="pattern">You can work with 0.001 steps</div>
</div>

快速解释正则表达式：
[1-9]\d* 表示可以有任何自然数
((.|,)\d{1,3})? 现在是. 或, 可以跟随分开分数
\d{1,3} 定义必须跟随一到三个数字

现在您的图案将以角度材质样式显示错误消息。

根据您的步骤的实际外观，您将不得不修改\d{1,3}，以反映过去逗号数字的数量，并可能换成模数，因此如果您想做一些事情，请链接step="0.005"。

【讨论】：