为什么angular表单验证应用了不正确的CSS样式？

Question

我需要帮助理解表单验证与angularjs1.5。

我有一个表单的名字字段，这是必需的。姓氏不是必需的。当我单击Last Name，然后不键入任何内容，然后单击out时，我看到它显示了一个红色边框。我希望有一个绿色的边框。

我为ng-valid和ng-touched设置了css样式以显示绿色边框，而ng-invalid和ng-touched样式则显示为红色边框。如果我只在Last Name内单击，然后单击out，那么我会看到显示了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>

​

Answer 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;
}