我有多个input字段，我想验证我的fields。当用户单击submit按钮时，它们不能为空。如果字段为空，当用户单击按钮时，我将如何显示border red。
这是我的代码http://plnkr.co/edit/XtnSdO9ARpHdn9RZotMt?p=info
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.c = [
{
name:'abc'
},
{
name:'pqr'
}
];
$scope.onclick =function(){
console.log($scope.c)
}
});
首先，您需要将所有输入字段放入表单标记中。像这样：
<form ng-submit="onclick()">
<button type="submit">submit</button>
<li ng-repeat="x in c">
<input type="text" ng-model='x.name' value="{{x.name=='abc'?'ddd':'hhh'}}" required="true"/>
</li>
</form>
对于输入，您需要设置property required="true"(如果需要条件值，则需要angular的ng(。Sumbit按钮需要type="submit"(这样他就触发了表单提交(。Submit函数需要从点击按钮移动到表单的属性ng Submit="onclick(("。
此示例已经可以使用本机html5验证消息。如果你想添加自定义样式，无效的输入会有css类('ng-invalid'(。
最好在字段中使用required属性。但是您可以使用指令进行手动验证。您只需要将您的输入封装在<form>中。此指令可以扩展为执行您想要的任何验证。下面是一个例子：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'World';
$scope.c = [{
name: 'abc'
}, {
name: 'pqr'
}];
$scope.onclick = function() {
console.log($scope.c)
}
});
app.directive("emptyValidator", function($q, $timeout) {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$validators.empty = function(modelValue, viewValue) {
if (!ctrl.$isEmpty(modelValue)) {
return true;
}
return false;
}
}
};
});.red-border {
border: 2px solid red;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="formName" ng-submit="onclick()">
<p>Hello {{name}}!</p>
<button type="submit">submit</button>
<ul>
<li ng-repeat="x in c">
<ng-form name="innerForm">
<input type="text" name="inputName" ng-model='x.name' empty-validator ng-class="{'red-border' : innerForm.inputName.$error.empty}" />
</ng-form>
</li>
</ul>
</form>
</div>
</body>
</html>但是，您请求了一个奇怪的请求来验证它，只需点击一个按钮，所以您可能想在函数本身中进行验证。这不是验证它的正确方法，但仍然可以做到。下面是一个例子：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'World';
$scope.c = [{
name: 'abc'
}, {
name: 'pqr'
}];
$scope.d = [false, false];
$scope.onclick = function() {
var f = false;
for (var i = 0; i < $scope.c.length; i++) {
if (!$scope.c[i].name) {
$scope.d[i] = true;
f = true;
} else {
$scope.d[i] = false;
}
}
if (f) {
return false;
}
console.log($scope.c)
}
});.red-border {
border: 2px solid red;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="onclick()">
<p>Hello {{name}}!</p>
<button type="submit">submit</button>
<ul>
<li ng-repeat="x in c">
<input type="text" ng-model='x.name' ng-class="{'red-border' : d[$index]}" />
</li>
</ul>
</form>
</div>
</body>
</html>