Question

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

我有一个带有名字字段的表格，这是必需的。姓氏不是必需的。当我点击姓氏，然后不输入任何内容并点击时，我看到它显示一个红色边框。我希望有一个绿色边框。

我有ng-valid和ng-touching的css样式显示绿色边框，ng-invalid和ng-touching显示红色边框。如果我只是单击姓氏内部然后单击，然后我看到显示ng-invalid ng-touching的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

我认为你的问题在于你的问题：

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

为什么角度形式验证应用了不正确的CSS样式？

1 个答案: