Afficher erreur si le bouton Vide cliqué et texte d'entrée AngularJS

Question

Je crée une page de connexion, je montre erreur si l'utilisateur clique dans le texte d'entrée et de le laisser vide

mais je dois montrer l'erreur si l'utilisateur ne clique pas en entrée texte et cliquez sur le bouton connexion

Mon code:

<form ng-submit="userForm.$valid && submit()" name="userForm" novalidate> 
    <div class="form-group" ng-class="{ 'has-error': userForm.login.$touched && userForm.login.$invalid }"> 
     <input type="text" name="login" placeholder="اسم المستخدم" class="form-control" ng-model="MainCtrl.login" ng-minlength="5" ng-maxlength="10" required> 
     <div class="help-block" ng-messages="userForm.login.$error" ng-if="userForm.login.$touched"> 
     <p ng-message="required">إسم المستخدم إجباري</p> 
     <p ng-message="minlength">إسم المستخدم قصير</p> 
     <p ng-message="maxlength">إسم المستخدم طويل</p> 
     </div> 
     <i class="fa fa-user"></i> 
    </div> 
    <div class="form-group" ng-class="{ 'has-error': userForm.pass.$touched && userForm.pass.$invalid }"> 
     <input type="password" name="pass" placeholder="كلمه السر" class="form-control" ng-model="MainCtrl.pass" ng-minlength="5" ng-maxlength="20" required> 
     <div class="help-block" ng-messages="userForm.pass.$error" ng-if="userForm.pass.$touched"> 
     <p ng-message="required">كلمة السر اجبارية</p> 
     <p ng-message="minlength">كلمة السر قصيرة</p> 
     <p ng-message="maxlength">كلمة السر طويلة</p> 
     </div> 
     <i class="fa fa-lock"></i> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="log-btn">دخول</button> 
    </div> 
</form> 

this is my code in plunker

Answer 1

Vous pouvez nous required="" sur votre étiquette d'entrée et userForm.$submitted sur vos messages d'erreur Bloc:

<div class="form-group" ng-class="{ 'has-error': (userForm.login.$touched && userForm.login.$invalid) || (userForm.$submitted && userForm.login.$invalid)}"> 
    <input type="text" name="login" placeholder="اسم المستخدم" class="form-control" ng-model="MainCtrl.login" ng-minlength="5" ng-maxlength="10" required=""> 
    <div class="help-block" ng-messages="userForm.login.$error" ng-show="userForm.$submitted || userForm.login.$touched"> 
     <p ng-show="userForm.login.$error.required" ng-message="required">required error</p> 
     <p ng-show="userForm.login.$error.minlength">minLength error</p> 
     <p ng-show="userForm.login.$error.maxlength">maxLength error</p> 
    </div> 
    <i class="fa fa-user"></i> 
</div> 

DEMO