2017-02-17 48 views
1

我正在使用以下代码验证所需的,最小长度和最大长度,它提供全部三条消息。您能否告诉我们如何根据用户输入进行控制?AngularJS中的验证消息问题

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

enter image description here

回答

2

请尝试使用此代码

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

改变你这样的代码

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