Validation message issue in AngularJS - 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>

Answer 1

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>

Answer 2

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>