我有一个表单的输入字段和验证设置通过添加所需的属性等。但对于某些字段，我需要做一些额外的验证。我如何“输入”到FormController控制的验证?
自定义验证可以是类似于“如果这3个字段被填写，那么这个字段是必需的，需要以特定的方式格式化”。
FormController中有一个方法。$setValidity，但这看起来不像一个公共API，所以我宁愿不使用它。创建一个自定义指令并使用NgModelController看起来是另一种选择，但基本上需要我为每个自定义验证规则创建一个指令，这是我不想要的。
实际上，从控制器标记字段为无效(同时也保持FormController同步)可能是我在最简单的场景中需要完成的工作，但我不知道如何做到这一点。
当前回答
你可以使用Angular-Validator。
示例:使用函数验证字段
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "myCustomValidationFunction(form.firstName)">
在控制器中，你会看到
$scope.myCustomValidationFunction = function(firstName){
if ( firstName === "John") {
return true;
}
你也可以这样做:
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "'!(field1 && field2 && field3)'"
invalid-message = "'This field is required'">
(其中field1、field2和field3是作用域变量。你可能还想检查字段是否不等于空字符串)
如果字段没有通过验证器，那么该字段将被标记为无效，用户将无法提交表单。
更多用例和示例请参见:https://github.com/turinggroup/angular-validator
免责声明:我是Angular-Validator的作者
其他回答
你可以使用Angular-Validator。
示例:使用函数验证字段
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "myCustomValidationFunction(form.firstName)">
在控制器中，你会看到
$scope.myCustomValidationFunction = function(firstName){
if ( firstName === "John") {
return true;
}
你也可以这样做:
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "'!(field1 && field2 && field3)'"
invalid-message = "'This field is required'">
(其中field1、field2和field3是作用域变量。你可能还想检查字段是否不等于空字符串)
如果字段没有通过验证器，那么该字段将被标记为无效，用户将无法提交表单。
更多用例和示例请参见:https://github.com/turinggroup/angular-validator
免责声明:我是Angular-Validator的作者
更新:
改进和简化了之前指令的版本(一个而不是两个)，功能相同:
.directive('myTestExpression', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
var expr = attrs.myTestExpression;
var watches = attrs.myTestExpressionWatch;
ctrl.$validators.mytestexpression = function (modelValue, viewValue) {
return expr == undefined || (angular.isString(expr) && expr.length < 1) || $parse(expr)(scope, { $model: modelValue, $view: viewValue }) === true;
};
if (angular.isString(watches)) {
angular.forEach(watches.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
ctrl.$validate();
});
});
}
}
};
}])
使用示例:
<input ng-model="price1"
my-test-expression="$model > 0"
my-test-expression-watch="price2,someOtherWatchedPrice" />
<input ng-model="price2"
my-test-expression="$model > 10"
my-test-expression-watch="price1"
required />
结果:相互依赖的测试表达式，其中验证器在更改其他指令模型和当前模型时执行。
测试表达式有局部$model变量，您应该使用它与其他变量进行比较。
以前:
我已经尝试通过添加额外的指令来改进@Plantface代码。如果我们的表达式需要在多个ngModel变量中进行更改时执行，这个额外的指令非常有用。
.directive('ensureExpression', ['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
controller: function () { },
scope: true,
link: function (scope, element, attrs, ngModelCtrl) {
scope.validate = function () {
var booleanResult = $parse(attrs.ensureExpression)(scope);
ngModelCtrl.$setValidity('expression', booleanResult);
};
scope.$watch(attrs.ngModel, function(value) {
scope.validate();
});
}
};
}])
.directive('ensureWatch', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ensureExpression',
link: function (scope, element, attrs, ctrl) {
angular.forEach(attrs.ensureWatch.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
scope.validate();
});
});
}
};
}])
示例:如何使用它来交叉验证字段:
<input name="price1"
ng-model="price1"
ensure-expression="price1 > price2"
ensure-watch="price2" />
<input name="price2"
ng-model="price2"
ensure-expression="price2 > price3"
ensure-watch="price3" />
<input name="price3"
ng-model="price3"
ensure-expression="price3 > price1 && price3 > price2"
ensure-watch="price1,price2" />
当ng-model或任何一个ensure-watch变量发生变化时，执行Ensure-expression来验证模型。
@ synergy我认为@blesh应该把函数验证如下
function validate(value) {
var valid = blacklist.indexOf(value) === -1;
ngModel.$setValidity('blacklist', valid);
return valid ? value : undefined;
}
ngModel.$formatters.unshift(validate);
ngModel.$parsers.unshift(validate);
你可以在你的验证场景中使用ng-required(“如果这3个字段都填写了，那么这个字段是必须的”:
<div ng-app>
<input type="text" ng-model="field1" placeholder="Field1">
<input type="text" ng-model="field2" placeholder="Field2">
<input type="text" ng-model="field3" placeholder="Field3">
<input type="text" ng-model="dependentField" placeholder="Custom validation"
ng-required="field1 && field2 && field3">
</div>
调用服务器的自定义验证
使用ngModelController $asyncValidators API来处理异步验证，比如向后端发送$http请求。添加到对象中的函数必须返回一个promise，该promise在有效时必须被解析，在无效时必须被拒绝。正在进行的异步验证通过key存储在ngModelController.$pending中。更多信息请参见AngularJS开发者指南-表单(自定义验证)。
ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
var value = modelValue || viewValue;
// Lookup user by username
return $http.get('/api/users/' + value).
then(function resolved() {
//username exists, this means validation fails
return $q.reject('exists');
}, function rejected() {
//username does not exist, therefore this validation passes
return true;
});
};
有关更多信息，请参见
ngModelController $asyncValidators API AngularJS开发者指南-表单(自定义验证)。
使用$validators API
接受的答案使用$parsers和$formatters管道添加一个自定义同步验证器。AngularJS 1.3+添加了一个$validators API，这样就不需要在$parsers和$formatters管道中添加验证器了:
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
ngModel.$validators.blacklist = function(modelValue, viewValue) {
var blacklist = attr.blacklist.split(',');
var value = modelValue || viewValue;
var valid = blacklist.indexOf(value) === -1;
return valid;
});
}
};
});
更多信息请参见AngularJS ngModelController API Reference - $validators。
