Question

我创建一个登录页面，如果用户点击输入文本并让他清空，我会显示错误

但如果用户没有点击输入文字并点击登录按钮

，我需要显示错误

我的代码：

<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

您可以在输入代码上使用required=""，在错误消息块上添加userForm.$submitted：

<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

如果单击按钮并输入文本空AngularJs，则显示错误

1 个答案: