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動態表單驗證基於選擇框

回答

相關問題