Validation message issue in AngularJS

Question

I am using the below code for validating required, min length and max length, which is giving all three messages. Could you please tell how to control based on the user input.

<form name="Textvaluepair" novalidate>
    <h4>New Network</h4>     

    <div class="form-group" ng-class="{ 'has-error': Textvaluepair.name.$touched && Textvaluepair.name.$invalid }">
      <label>Name</label>
      <input type="text" name="name" class="form-control" 
        ng-model="networkModel.name"
        ng-minlength="5"
        ng-maxlength="10"
        required>

      <div class="help-block" ng-messages="Textvaluepair.name.$error" ng-if="Textvaluepair.name.$touched">
        <p ng-message="minlength">Your name is too short.</p>
        <p ng-message="maxlength">Your name is too long.</p>
        <p ng-message="required">Your name is required.</p>
      </div>
    </div>
    <div class="form-group">
        <button type="submit" ng-click="Submit()">Submit</button>
    </div>
</form>

Pankaj · Accepted Answer · 2017-02-17 07:36:27Z

2

Please try to use this code

<span ng-show="Textvaluepair.name.$error.required" class="help-block">Required</span>
<span ng-show="Textvaluepair.name.$error.minlength" class="help-block">Min Length</span>
<span ng-show="Textvaluepair.name.$error.maxlength" class="help-block">Max Length</span>

answered Feb 17, 2017 at 7:36

Pankaj

10.2k40 gold badges152 silver badges298 bronze badges

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

Comments

bipin patel · Accepted Answer · 2017-02-17 07:41:49Z

1

change your code like this

<div class="help-block" ng-repeat="(key, value) in Textvaluepair.name.$error" ng-if="Textvaluepair.name.$touched">
   <p ng-if="key == 'minlength'">Your name is too short.</p>
   <p ng-if="key == 'maxlength'">Your name is too long.</p>
   <p ng-if="key == 'required'">Your name is required.</p>
</div>

answered Feb 17, 2017 at 7:41

bipin patel

2,1111 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Validation message issue in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related