2017-02-17 5 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> 
のようなあなたのコード