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

我有一个相当直接的指令，以确保对表单字段是否包含有效的电话号码或有效的电子邮件进行一些基本的完整性检查，具体取决于选择哪个选择框选项（电子邮件或文本）。
根据所做的选择输入有效的电子邮件或电话号码后会出现问题，并且选择了其他选项，即使验证字段不再是有效条目，仍然有效。AngularJS动态表单验证基于选择框

当选择选项被改变时，我被困在了如何通过指令重新验证字段。

我的指令如下：

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._-][email protected][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

来源

2014-02-06 Brian

您是否尝试过按照此链接进行角度验证http://www.ng-newsletter.com/posts/validations.html如果您想执行正则表达式，则可以尝试使用ng模式。如果你不想使用它，那么恢复会尝试修复这个指令 – V31

我的问题是不使用正则表达式本身或单独使用的问题是基于以前的表单字段选择我需要能够改变正在使用正则表达式。一个正则表达式很容易使用ng-pattern，或者修改该指令只使用一个正则表达式，问题在于输入的更改和重新验证。 – Brian

您是否尝试将您的手表更改为$ scope。$ watch（'service'，function（）{}？如果不是，我希望这有帮助 – V31

我发现，通过将线patternValidator（ CTRL $ viewValue）。在手表内重新验证select元素更改的字段。我不确定这是否是这样做的最佳方式，但它确实有效。我已经更新了我的运动员，以反映上述链接中的这一变化。

来源

2014-02-10 20:34:26 Brian

你试图将呼叫像表内确认：

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._-][email protected][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; 
       } 
      } 
     } 
    } 
})

来源

2014-02-07 05:14:15 V31

我在编辑中添加了一个链接到一个plunker示例。 – Brian

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

回答

相关问题