如果 ng-invalid 类无效，Angular 会自动将其添加到电子邮件输入字段，如何将 ng-invalid 类添加到 input#confirmEmail 如果与 input#email 不匹配，如果匹配则删除。
基本上，我不需要在不匹配的情况下显示任何消息，只是想通过 ng-invalid 类突出显示输入字段并据此验证表单。
<li>
<label for="email">Email</label>
<input type="email" id="email" name="email" ng-model="data.account.email" ng-required="">
</li>
<li>
<label for="confirmEmail">Confirm Email</label>
<input type="email" id="confirmEmail" name="confirmEmail" ng-model="data.account.confirmEmail">
</li>
最佳答案
扩展我的评论来回答。这是一个简单的比较指令验证，如果表单和输入与输入的值不匹配，则可以使用它使表单和输入无效。利用 ngModelController 的 (>= V1.3.x) $validators处理它变得很容易。
指令将如下所示:
.directive('comparewith', ['$parse', function($parse){
return {
require:'ngModel',
link:function(scope, elm, attr, ngModel){
//Can use $parse or also directly comparing with scope.$eval(attr.comparewith) will work as well
var getter = $parse(attr.comparewith);
ngModel.$validators.comparewith = function(val){
return val === getter(scope);
}
scope.$watch(attr.comparewith, function(v, ov){
if(v !== ov){
ngModel.$validate();
}
});
}
}
}]);
并将其用作:
<li>
<label for="email">Email</label>
<input type="email" id="email" name="email"
ng-model="data.account.email" required>
</li>
<li>
<label for="confirmEmail">Confirm Email</label>
<input type="text" id="confirmEmail" name="confirmEmail"
comparewith="data.account.email" required
ng-model="data.account.confirmEmail">
</li>
演示
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.submit = function(form) {
if (form.$invalid) {
alert("oops password and confirm must match and must be valid");
} else {
alert("Äll good!!");
}
};
}).directive('comparewith', ['$parse', function($parse) {
return {
require: 'ngModel',
link: function(scope, elm, attr, ngModel) {
var getter = $parse(attr.comparewith);
ngModel.$validators.comparewith = function(val) {
return val === getter(scope);
}
scope.$watch(attr.comparewith, function(v, ov){
if(v !== ov){
ngModel.$validate();
}
});
}
}
}]);/* Put your css in here */
form.ng-invalid {
border: 1px solid red;
box-sizing: border-box;
}
input.ng-invalid {
border: 2px solid red;
box-sizing: border-box;
}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24454a43514845560a4e5764150a170a5c" rel="noreferrer noopener nofollow">[email protected]</a>" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form" ng-submit="submit(form)" novalidate>
<ul>
<li>
<label for="email">Email</label>
<input type="email" id="email" name="email" ng-model="data.account.email" required>
</li>
<li>
<label for="confirmEmail">Confirm Email</label>
<input type="text" id="confirmEmail" name="confirmEmail" comparewith="data.account.email" required ng-model="data.account.confirmEmail">
</li>
</ul>
<button>Submit</button>
</form>
</body>
</html>关于javascript - 在输入不匹配时添加 ng-invalid 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28033899/