angularjs - Missing step attribute error message in input -
angular js provide validation several html5 introduced attributes of input, min
or required
including .
<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 required</div> <div ng-message="min">you must not use negative values</div> </div>
for step
attribute such validation working, no error message can displayed material way default, what's easiest way implement (for example 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 required</div> <div ng-message="min">you must not use negative values</div> <div ng-message="step">you can work 0.001 steps</div> </div>
simple, use regex this:
<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 required</div> <div ng-message="min">you must not use negative values</div> <div ng-message="pattern">you can work 0.001 steps</div> </div>
to eplain regex quickly:
[1-9]\d*
means there can natural numbers
((.|,)\d{1,3})?
.
or ,
can follow seperate fraction
\d{1,3}
defines there have 1 3 numbers have follow
now pattern show error message in angular material style.
depending on how step should like, have modify either \d{1,3}
, reflect amount past commata numbers , maybe wrap modulo, if want todo link step="0.005"
.
Comments
Post a Comment