为什么角度表单验证应用了不正确的 CSS 样式？答案

【问题标题】：Why is the angular form validation applying incorrect CSS styles?为什么角度表单验证应用了不正确的 CSS 样式？
【发布时间】：2017-06-18 08:28:00
【问题描述】：

我需要帮助理解 angularjs 1.5 的表单验证。

我有一个必须填写名字字段的表单。姓氏不是必需的。当我单击姓氏，然后不输入任何内容并单击退出时，我看到它显示了一个红色边框。我希望有一个绿色边框。

我有 ng-valid 和 ng-touched 的 css 样式来显示绿色边框和 ng-invalid 和 ng-touched 来显示红色边框。如果我只是单击姓氏内部然后单击退出，那么我看到显示了 ng-invalid ng-touched 的 css 样式，并且我看到显示了一个红色边框。为什么当不需要该字段并且错误对象为空白时，我会看到红色边框。

(function(){
  'use strict';
  var app = angular.module('demoApp', ['ui.router']);
  app.controller('SignupController', SignupController);
  SignupController.$inject=['$rootScope'];
  function SignupController(){
    var ctrl = this;
    ctrl.userName = "";
    ctrl.lastName = "";
  }
})();

.ng-invalid .ng-touched  {
  border: 2px solid red;
}
.ng-valid .ng-touched  {
  border:2px solid green;
}

<!DOCTYPE html>
<html ng-app='demoApp'>
<head>
  <title>Forms {{10+20}}</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>

  <script src="script.js"></script>
  <link rel="stylesheet"  href="style.css">
</head>
<body ng-controller="SignupController as ctrl">
  <h1>World of Forms{{10+20}}</h1>

  <fieldset>
    <legend>Signup</legend>
    <form name="signupForm" novalidate>
    <br/>First Name*: <input type="text" required id="userName" name="userName" ng-model='userName'>
    <span ng-if='signupForm.userName.$error.required && signupForm.userName.$touched'>Name is Required</span>
   
    <br/>
    <br/>Last Name: <input type="text" id="lastName" name="lastName" ng-model='lastName'>
    <span>Error:{{signupForm.lastName.$error | json}}</span>
    </form>
  </fieldset>
</body>
</html>

【问题讨论】：

是的，我还打印了 "signupForm.lastName.$error.required" 。它显示一个空白对象。如果 $error 中包含所需的属性，它将与当前代码一起显示。

标签： css angularjs

【解决方案1】：

我认为您的问题在于您的 css：

.ng-invalid .ng-touched  {
  border: 2px solid red;
}

如果您触摸该字段，无论如何，您的字段都会应用ng-touched 类，这使其具有红色边框。

也许可以试试这个：

.ng-invalid.ng-touched  {
  border: 2px solid red;
}

.ng-valid.ng-touched  {
  border:2px solid green;
}

【讨论】：

这是因为<form> 标签也获得了ng-invalid 类。 OP 应该对 .ng-valid .ng-touched 做同样的事情