Question

假设我们有一个自定义验证器，其输入作为属性的值。

app.directive('inputRequired', function() {
    return {
        require: 'ngModel',
        scope: {
            inputRequired: '='
        },
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.inputRequired = function(modelValue) {
                return !(scope.inputRequired && ctrl.$isEmpty(modelValue));
            };
        }
    };
});

在范围内，我们定义一个变量和一个函数来切换变量的值：

$scope.isRequired = false;

$scope.toggle = function() {
    $scope.isRequired = !$scope.isRequired;
};

然后我们创建一个表单，我们将使用自定义验证器。我们也添加了一个按钮来调用切换功能。

<form>
    <input type="text" ng-model="someModel" input-required="isRequired"/>
    <button ng-click="toggle()">toggle</button>
</form>

这应该如何运作？加载表单并初始化范围后，isRequired的值将设置为false。因此不需要输入字段。点击切换按钮后，isRequired的值将更改为true。但！尽管验证器范围内的变量已更改，但未触发验证。

重要提示：这只是一个例子。我知道ng-required指令，它实现了这个功能。当验证器有输入并且字段的有效性取决于该输入时，我需要一个通用的解决方案。如果输入已更改，则必须立即重新验证该字段。

Answer 1

刚刚找到一个解决方案：在链接函数的范围上添加一个观察者，并在inputRequired更改时调用$ validate：

app.directive('inputRequired', function() {
    return {
        require: 'ngModel',
        scope: {
            inputRequired: '='
        },
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.inputRequired = function(modelValue) {
                return !(scope.inputRequired && ctrl.$isEmpty(modelValue));
            };

            scope.$watch("inputRequired", function() {
                ctrl.$validate(); 
            });
        }
    };
});

自定义验证器范围更改的触发器验证

1 个答案: