フォームのバリデーションを区別する方法と、バリデーションごとに個別にエラーメッセージを表示する方法はありますか？ここ

Question

は私が名前フィールドのために行ったようにそれは、空のままにされたときに、ユーザー名フィールドに同様の検証を使用してみました...私がやったこと

<form name="userForm" ng-submit="submitForm()" novalidate> 
<!-- NAME --> 
<div ng-class="{'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> 

    <label>Name</label> 

    <input type="text" name="name" class="form-control" id = "focusedInput" ng-model="user.name" required> 
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Your name is required.</p> 
</div> 

<!-- USERNAME --> 
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> 
    <label>Username</label> 
    <input type="text" name="username" class="form-control" ng-model="user.username" required id = "focusedInput" ng-minlength="3" ng-maxlength="8"> 
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p> 
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p> 
    <p ng-show="userForm.username.$invalid && !userForm.username.$pristine" class="help-block">Your Username is required.</p> 

</div> 

<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> 

</form> 

です。しかし、問題は次のとおりです。名前とユーザー名に関連するエラーメッセージの両方が、ユーザー名フィールドの最小長さの開始時まで印刷されています。誰もこれで私を助けることができますか？

Answer 1

ng-showに$ダーティチェックを追加します。 De $ dirtyフラグは、ユーザーがフォームを操作したときにtrueになります。

<p ng-show="userForm.username.$error.minlength && userForm.username.$dirty" class="help-block">Username is too short.</p>