为什么角度表单验证应用了错误的CSS样式？
我需要帮助理解angularjs 1.5的表单验证。
我有一个带有名字字段的表单，这是必需的。姓氏不是必需的。当我按入姓氏，然后不键入任何内容，然后按出时，我看到它显示一个红色边框。我希望有一个绿色的边界。
我有ng-有效和ng-触摸的css样式显示绿色边框和ng-无效和ng-触摸显示红色边框。如果我只是点击里面的姓氏，然后点击了出来，然后我看到的css样式为ng-无效ng-触摸显示，我看到一个红色的边框显示。当字段不需要并且错误对象为空时，为什么我看到红色边框。
(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>共有1个答案
我认为你的问题在于你的css：
.ng-invalid .ng-touched {
border: 2px solid red;
}
如果您触摸该字段，无论发生什么情况，您的字段都将应用ng toucted类，这使其具有红色边框。
也许可以试试这个：
.ng-invalid.ng-touched {
border: 2px solid red;
}
.ng-valid.ng-touched {
border:2px solid green;
}
-
所以我想尝试在登录页面上显示“无效用户名或密码”的错误信息，每当用户得到他们是错误的。 到目前为止，我只是将它记录在控制台中，在那里我看到错误：“auth/invalce-email”，其消息属性是：“电子邮件地址格式化得很糟糕。”当输入错误的电子邮件时（密码也是如此）。有什么方法可以在我的singin组件的html中的ngIf div元素中显示这些（或者更确切地说是自定义消息“无效的用户名或密码
-
我对Angular很陌生，我正在尝试使用Angular和Bootstrap 4创建一个注册表单。 我想要的结果是使用Bootstrap的样式和Angular的验证。更准确地说，在验证表单时，Angular在两个不同的地方应用样式(ng-valid、ng-invalid等）：input元素和form元素。 我使用的是反应形式，我想避免这样的事情（未测试）： 有没有一个简单的方法（不是太冗长）来实现这
-
问题内容： 我正在尝试在博客文章（尤其是ng禁用形式）的表单中使用角度表单验证。由于某些原因，我无法确定提交按钮没有被禁用，除非所有三个输入字段均有效，否则应该处于应有的状态。谢谢您的帮助。 这是我的博客模板 这是我的index.html 这是我的博客控制器 问题答案： 您在表单的每个字段中都缺少您。请记住，当你提到在当时任何形式的字段创建表单名对象中的额外的对象与特定的属性，然后考虑而表单验证一
-
我在angular中创建了一个表单，要求名称字段只包含字母数字字符和空格。为此，我使用了模式属性: 并且我有以下错误消息，我想在字符串不匹配时显示： 然而，即使字符串应该与正则表达式匹配，我仍然可以看到错误消息。有什么想法吗？
-
我正在用电子邮件和密码设置授权功能。一切正常，但当我创建一个新用户时，应用程序会发送一封带有验证链接的电子邮件。在我验证电子邮件地址后，我想登录，因此我返回登录表单。在我硬重新加载页面后，emial_。有人能帮我吗？
-
[错误]COM的父POM不可解析。示例：DynamoWork:0.0.1-快照：无法传输项目org.springframework.boot:spring-boot-starter-parent:POM:2.1.0。从/到项目发布(https://repo.maven.apache.org/maven2/):sun.security.validator.validatorexception：PKI