AngularJS中的验证消息问题

Question

我使用以下代码验证必需，最小长度和最大长度，这将给出所有三条消息。您能告诉我如何根据用户输入进行控制。

<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

请尝试使用此代码

<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

像这样更改您的代码

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