Menu
I could not display the error message while input field takes the invalid data using Angular.js. Here is my code:
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div ng-class="{ 'myError': billdata.type.$touched && bill data.type.$invalid }">
<input type="number" class="form-control oditek-form" ng-model="type" name="type" step="1" min="0" placeholder="Add Type" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
</div>
<div class="help-block" ng-messages="billdata.type.$error" ng-if="billdata.type.$touched">
<p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9).</p>
</div>
</form>
Here I need to only give number as input. If user is entering anything rather than number it should display the error message. Here myError is showing the red color border on input field which is coming properly but the message is not coming which should display.
285
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<form name="myForm">
For Text <input name="myName" ng-model="myName" ng-pattern="/^[a-zA-Z ]+$/" required>
<span style="color: red" ng-show="myForm.myName.$error.required">First Name is required.</span> <span style="color: red" ng-show="myForm.myName.$error.pattern">Any other symbol are not allow.</span>
<br />
For Number
<input type="number" class="textbox_usr" name="txtmobno" id="txtmobno" ng-model="txtmobno" ng-minlength="10" ng-maxlength="10" required /><br />
<span style="color:red" ng-show="myForm.txtmobno.$dirty && myForm.txtmobno.$invalid">
<span ng-show="myForm.txtmobno.$error.required || myForm.txtmobno.$error.number">Valid Mobile number is required</span>
<span ng-show="((myForm.txtmobno.$error.minlength || myForm.txtmobno.$error.maxlength) && myForm.txtmobno.$dirty) ">Mobile number should be 10 digits</span>
</span>
</form>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
