Question

我有一个相当直接的指示，以确保对表单字段是否包含有效电话号码或有效电子邮件进行一些基本的健全性检查，具体取决于选择了哪个选择框选项（电子邮件或文本）。
在输入与所做选择相对应的有效电子邮件或电话号码并且选择了另一个选项之后出现问题，正在验证的字段保持有效，即使它不再是有效条目。

当选择选项发生变化时，我很难确定如何通过指令重新验证字段。

我的指示如下：

directive("rpattern", function() {
        return {
            restrict: "A",
            require: "ngModel",
            scope: {
                service: '='
            },
            link: function(scope, el, attrs, ctrl) {
                var validator, patternValidator,
                        pattern;
                scope.$watch(function() {
                    if (scope.service == 'Text') {
                        pattern = new RegExp(/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/);
                    } else if (scope.service == 'Email') {
                        pattern = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/);
                    }
                });
                patternValidator = function(value) {
                    return validate(pattern, value);
                };
                ctrl.$formatters.push(patternValidator);
                ctrl.$parsers.push(patternValidator);
                function validate(regexp, value) {
                    if (value == null || value === "" || regexp.test(value)) {
                        ctrl.$setValidity('pattern', true);
                        return value;
                    } else {
                        ctrl.$setValidity('pattern', false);
                        return;
                    }
                }
            }
        }
    })

非常感谢任何帮助！

修改这里创建了一个plunker：http://plnkr.co/edit/Q7CMj8t5TzkkXMUOLzgF?p=preview

Answer 1

您是否尝试过调用以在手表内验证：

directive("rpattern", function() {
    return {
        restrict: "A",
        require: "ngModel",
        scope: {
            service: '='
        },
        link: function(scope, el, attrs, ctrl) {
            var validator, patternValidator,
                    pattern;
            scope.$watch(function() {
                if (scope.service == 'Text') {
                    pattern = new RegExp(/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/);
                } else if (scope.service == 'Email') {
                    pattern = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/);
                }
            patternValidator = function(value) {
                return validate(pattern, value);
            };
            ctrl.$formatters.push(patternValidator);
            ctrl.$parsers.push(patternValidator);
            });
            function validate(regexp, value) {
                if (value == null || value === "" || regexp.test(value)) {
                    ctrl.$setValidity('pattern', true);
                    return value;
                } else {
                    ctrl.$setValidity('pattern', false);
                    return;
                }
            }
        }
    }
})

Answer 2

我发现通过添加行patternValidator（ctrl。$ viewValue）;在手表内工作以重新验证选择元素更改的字段。我不确定这是否是最佳方式，但它确实有效。我更新了我的plunker以反映上述链接中的这一变化。

AngularJS动态表单验证基于选择框

2 个答案: