displaying error messages below the input form

Question

I would like to know how can i display an error message below the input field using angular js. If the field is empty i want to display "This field is required". Also how to check if the field name starts with alphanumeric values like (\?/%*:|"<.>) i need to display the error "The field name should not start with alphanumeric values" below that input field. // code goes here

<div ng-controller="ModalController">

                    <form novalidate name="inputForm" class="form-horizontal">
                <div class="row">
                    <div class="col-md-12">
                        <cp-input name="username" ng-model="user.name"
                            label="{{'formlabels.reponame' | translate}}" required="true"
                             error-state="right">
                        </cp-input>
                    </div>
                </div>
                <div style="color:red" ng-show="inputForm.username.$error.required">First name is required</div><br>
                </form>
                <!-- <a href="javascript:void(0)" ng-click="findUsers()"> Show Confirm </a> -->
                <button type="button" class="btn btn-primary" data-dismiss="modal"
                    data-ng-click="submitData()">Add</button>
            </div>

Matuszew · Accepted Answer · 2016-12-19 13:21:10Z

1

It would be a good idea to use ngMessages directive and ngPattern - take a look at the doc link with example

 <form name="myForm">
   <label>
   Enter your name:
   <input type="text"
       name="myName"
       ng-model="name"
       ng-minlength="5"
       ng-maxlength="20"
       ng-pattern="^[^\w+$]"
       required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
 </div>
 </form>

ref https://docs.angularjs.org/api/ngMessages/directive/ngMessages

answered Dec 19, 2016 at 13:21

Matuszew

8515 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manikandan Velayutham · Accepted Answer · 2016-12-19 14:03:06Z

1

ng-messages will help you..Try this

<input ng-model="typeText" id="Sample" name="Sample" type="text" ng-pattern="^$|^[A-Za-z0-9]+" required/>
 or ng-pattern="/^[a-zA-Z\s]*$/" 
        <div ng-messages="formname.Sample.$error">
          <div ng-message="pattern">only characters are allowed</div>
          <div ng-message="required">field required</div>
        </div>

edited Dec 19, 2016 at 14:03

answered Dec 19, 2016 at 10:07

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

2 Comments

shaaa Over a year ago

the above regex is not working according to my requirement. My requirement is, in the input name the first character should not start with special character. If the special character is in between it should allow.

Manikandan Velayutham Over a year ago

Then choose custom directive, in that use preventDefault() on keypress, change, paste. Compare model length is 0 or get first letter of model. If have special character to deny.

Collectives™ on Stack Overflow

displaying error messages below the input form

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related