geetha janar geetha janar - 5 months ago 54
AngularJS Question

how to allow only numbers in textbox in angularjs?

Hi am newbie to angular js?
How to allow numbers only in texbox once user enter decimal value or string showing error in angular js?

<div class="col-md-6 col-sm-6">
<label class="col-md-5 col-sm-5 pad-top5 pad-lft-no">Min <span class="error">*</span></label>
<input positive type="number" class="col-md-7 col-sm-7 cls_input_inherit numberinput" min="0" ng-maxlength="3" id="age_min" name="age_min" ng-model="attributes.age_min" required/>
<label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.required" class="error">{{formValidation.required}}</label>
<label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && attributesForm2.age_min.$error.maxlength" class="error"> {{formValidation.monthMaxChar}} </label>
<label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.min" class="error">{{formValidation.minMax}}</label>
<label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.number" class="error">{{formValidation.errorNumber}}</label>
<label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.positive" class="error">{{formValidation.minpositive}}</label>
</div>


Am try above code but it's not showing error when enter decimal value?How to solve it?

Answer

you need to add ng-pattern="/^(\d)+$/" in input field.

 <div class="col-md-6 col-sm-6"> 
 <label class="col-md-5 col-sm-5 pad-top5 pad-lft-no">Min <span class="error">*</span></label>
                                                    <input positive  type="number" class="col-md-7 col-sm-7 cls_input_inherit numberinput" min="0" ng-maxlength="3" id="age_min" name="age_min" ng-model="attributes.age_min" ng-pattern="/^(\d)+$/" required/>
                                                    <label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.required && attributesForm2.age_min.$touched && attributesForm2.age_min.$invalid"  class="error">{{formValidation.required}}</label>                                                           
                                                    <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive &&  attributesForm2.age_min.$error.maxlength" class="error"> {{formValidation.monthMaxChar}} </label>
                                                    <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.min" class="error">{{formValidation.minMax}}</label>
                                                    <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.number" class="error">{{formValidation.errorNumber}}</label>
                                                    <label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.positive" class="error">{{formValidation.minpositive}}</label>
                                                </div>
Comments