Угловые 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>
Просто, просто используйте регулярное выражение:
<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})?
теперь a .
или ,
могут следовать для разделения фракции \d{1,3}
определяет, что должно быть от одного до трех чисел.
Теперь ваш шаблон покажет сообщение об ошибке в стиле углового материала.
В зависимости от того, как на самом деле должен выглядеть ваш шаг, вам нужно будет изменить либо \d{1,3}
, чтобы отразить количество прошлых номеров commata, либо, возможно, обернуть его в модуле, поэтому, если вы хотите сделать что-то ссылку step="0.005"
.