提交表单angularjs后，为所有无效字段显示红色边框

3 回答

• 47

  参考文章：Show red color border for invalid input fields angualrjs

  我在所有输入字段上都使用了ng-class . 如下所示

  <input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>
  

  当我点击保存按钮时，我将 newEmployee.submitted 值更改为 true （您可以在我的问题中查看） . 所以当我点击save时，一个名为 submitted 的类被添加到所有输入字段（最初由angularjs添加了一些其他类） .

  所以现在我的输入字段包含这样的类

  class="ng-pristine ng-invalid submitted"
  

  现在我使用下面的css代码 show red border on all invalid input fields （提交表格后）

  input.submitted.ng-invalid
  {
    border:1px solid #f00;
  }
  

  谢谢 ！！

  Update:

  我们可以在表单元素中添加ng-class，而不是将其应用于所有输入元素 . 因此，如果提交表单，则会将新类（已提交）添加到表单元素中 . 然后我们可以使用下面的选择器选择所有无效的输入字段

  form.submitted .ng-invalid
  {
      border:1px solid #f00;
  }
  

  回复于 2024-05-03T04:23:42+08:00
• 11

  我创建了一个working CodePen example来演示如何实现目标 .

  我将 ng-click 添加到 <form> 并从按钮中删除了逻辑：

  <form name="addRelation" data-ng-click="save(model)">
  ...
  <input class="btn" type="submit" value="SAVE" />
  

  这是更新的模板：

  <section ng-app="app" ng-controller="MainCtrl">
    <form class="well" name="addRelation" data-ng-click="save(model)">
      <label>First Name</label>
      <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>
  
      <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$invalid">First Name is required</span>
  
      <label>Last Name</label>
      <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/>
  
      <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$invalid">Last Name is required</span>
  
      <label>Email</label>
      <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/>
  
      <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span>
      <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span>
  
      <input class="btn" type="submit" value="SAVE" />  
    </form>
  </section>
  

  和控制器代码：

  app.controller('MainCtrl', function($scope) {  
    $scope.save = function(model) {
      $scope.addRelation.submitted = true;
  
      if($scope.addRelation.$valid) {
        // submit to db
        console.log(model); 
      } else {
        console.log('Errors in form data');
      }
    };
  });
  

  我希望这有帮助 .

  回复于 2024-05-03T04:23:42+08:00
• 6

  如果表单已提交，则可以使用默认的ng-submitted设置 .

  https://docs.angularjs.org/api/ng/directive/form

  示例：http://jsbin.com/cowufugusu/1/

  回复于 2024-05-03T04:23:42+08:00