Cannot display the error message using Angular.js

Question

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.

plz mark your answer if any below answers helped.

ismail baig
– ismail baig

2016-08-24 08:00:36 +00:00
Commented Aug 24, 2016 at 8:00 — ismail baig
– ismail baig, Commented Aug 24, 2016 at 8:00

User · Accepted Answer · 2016-08-24 06:47:35Z

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

Rakesh Chand · Accepted Answer · 2016-08-24 05:53:29Z

0

ng-messages div should be like following

<div ng-messages="billdata.type.$error" ng-show="billdata.type.$touched">
  <div ng-message when="pattern">
    <span>This field needs only number(e.g-0,1..9).</span>
  </div>
</div>

answered Aug 24, 2016 at 5:53

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

7 Comments

Rakesh Chand Over a year ago

can you tell me what versions are you using for ng-messages and angular?

Rakesh Chand Over a year ago

Also see this answer stackoverflow.com/questions/24407720/…

ismail baig Over a year ago

i am using angular-toastr to display messages. Along side you can also use ng-Dialogue in your controller

Rakesh Chand Over a year ago

you did not mention that in question. And with ng-messages it is working with right versions for me.

satya Over a year ago

@Rakeschand : NO i used your code but its not working.

|

Collectives™ on Stack Overflow

Cannot display the error message using Angular.js

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related