Question

我正在使用AngularJS创建一个Web应用程序，我有一个包含两个字段的表单，应该验证为互斥。我的意思是应该填写一个或另一个字段，但不能同时填充（如果两个字段都没有填充它也是有效的）。我的表格（真实案例的简化模型）是这样的：

<form id="form1" name="form1">
   <p>
      <input type="text" id="field1" name="field1" ng-model="model.item1" not-both-filled="model.item2" />
   </p>
   <p>
      <input type="text" id="field2" name="field2" ng-model="model.item2" not-both-filled="model.item1" />
   </p>
   <p ng-show="form1.$invalid">not valid</p>
   <p ng-show="!form1.$invalid">valid</p>
</form>

我创建了一个这样的指令：

angular.module('myApp', []).directive('notBothFilled', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            var validateNotBothFilled = function(value) {
                var theOther = scope.$eval(attrs.notBothFilled);
                var isNotValid = (value && value !== '' && theOther && theOther !== '');
                ctrl.$setValidity('field1', !isNotValid);
                ctrl.$setValidity('field2', !isNotValid);
                return value;
            };

            ctrl.$parsers.unshift(validateNotBothFilled);
            ctrl.$formatters.unshift(validateNotBothFilled);

        }
    };
});

但是，这有以下问题：

填充字段1
fill field 2
表格无效
空地1
表单应该有效但不

如果我清空field2，行为是正确的。

抱歉，我的AngularJS经验很少（英语不是我的母语），但有人可以告诉我：

这样的指令通常是验证AngularJS中互斥字段的正确方法吗？
我的代码出了什么问题，如果我清空任何字段，如何才能使表格有效？

我还有一个JS小提琴：http://jsfiddle.net/k6ps/7vCZg/

此致 k6ps

Answer 1

你的主要问题是这2行：

ctrl.$setValidity('field1', !isNotValid);
ctrl.$setValidity('field2', !isNotValid);

这两行实际上设置了相同输入字段的2个自定义有效性，你需要以某种方式获取另一个输入字段的ngModelController来设置其有效性

试试这个：

<form id="form1" name="form1">
    <p>
        <input type="text" id="field1" name="field1" ng-model="model.item1" not-both-filled="field2" form="form1"/> 
    //I pass the field name instead and also the form where these inputs are defined.
    </p>
    <p>
        <input type="text" id="field2" name="field2" ng-model="model.item2" not-both-filled="field1" form="form1"/>
    </p>
    <p ng-show="form1.$invalid">not valid</p>
    <p ng-show="!form1.$invalid">valid</p>
</form>

JS：

angular.module('myApp', []).directive('notBothFilled', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            var validateNotBothFilled = function(value) {
                var form = scope[attrs.form];
                var theOther = form[attrs.notBothFilled];
                var isNotValid = (value && value !== '' && theOther.$modelValue && theOther.$modelValue !== '');
                ctrl.$setValidity('field', !isNotValid);//set validity of the current element
                theOther.$setValidity('field', !isNotValid);//set validity of the other element.
                return value;
            };

            ctrl.$parsers.unshift(validateNotBothFilled);

        }
    };
});

DEMO

使用AngularJS验证具有互斥字段的表单

1 个答案: