Сообщение об ошибке пропущенного атрибута шага при вводе

0

Угловые 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>
Теги:
validation
angular-material
input

1 ответ

0

Просто, просто используйте регулярное выражение:

<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".

Ещё вопросы

Сообщество Overcoder
Наверх
Меню