Angularjsdynamicng模式validation

我有一个表单,如果一个checkbox是假的,使用ng-required指令强制文本inputvalidation。 如果checkbox为true,则该字段将被隐藏,并将ng-required设置为false。

问题是,我也有一个正则expression式在input上指定的validation,以及使用NG模式angular度指令。 我遇到的问题是,如果用户填写一个无效的电话号码,选中该框禁用该input(因此不需要进一步的validation)表单将不允许提交,因为它是基于ng模式无效。

我试图通过添加一个ng-change函数来将input模型设置为null来解决这个问题,但是ng-pattern,因此这个字段在checkbox的初始设置中仍然被设置为false。 但是,如果我取消选中该框,将所有内容设置回初始表单加载,然后再次选中该框,表单有效并可以提交。 我不知道我错过了什么。 这是我迄今为止的ng-change代码:

var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/; $scope.phoneNumberPattern = phoneNumberRegex; $scope.removeValidation = function() { if ($scope.cell._newUser === false) { $scope.request._number = ''; $scope.phoneNumberPattern = /[0-9a-zA-Z]?/; } else { $scope.phoneNumberPattern = phoneNumberRegex; } }; 

    7 Solutions collect form web for “Angularjsdynamicng模式validation”

    这是一个有趣的问题,复杂的angular度validation。 下面的小提琴实现你想要的:

    http://jsfiddle.net/2G8gA/1/

    细节

    我创build了一个新的指令rpattern ,它是Angular的ng-required和来自input[type=text]ng-pattern代码的混合。 它所做的是注意字段的required属性,并在使用正则expression式进行validation时考虑这一点,即如果不需要标记字段为valid-pattern

    笔记

    • 大部分代码来自Angular,根据需要量身定制。
    • 当checkbox被选中时,该字段是必需的。
    • 当所需的checkbox为false时,该字段不会隐藏。
    • 演示的正则expression式被简化了(有效的是3位)。

    一个肮脏 (但较小)的解决scheme,如果你不想要一个新的指令,会是这样的:

     $scope.phoneNumberPattern = (function() { var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/; return { test: function(value) { if( $scope.requireTel === false ) { return true; } return regexp.test(value); } }; })(); 

    而在HTML中不需要更改:

     <input type="text" ng-model="..." ng-required="requireTel" ng-pattern="phoneNumberPattern" /> 

    这实际上是把angular度转化为调用我们的 test()方法,而不是RegExp.test() ,它将需要的考虑在内。

    不要从Nikos的真棒回答中拿走任何东西,也许你可以更简单地做到这一点:

     <form name="telForm"> <input name="cb" type='checkbox' data-ng-modal='requireTel'> <input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/> <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button> </form> 

    注意第二个input:我们可以使用ng-if来控制表单中的渲染和validation。 如果requireTelvariablesrequireTel设置,那么第二个input不仅会被隐藏,而且不会被渲染,因此表单将通过validation,并且button将被启用,您将获得所需的内容。

    使用的模式:

      ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" 

    使用的参考文件:

      '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>' 

    input示例:

      <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit"> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
     <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit"> 

    我前几天碰到了这个。

    我所做的,似乎比上面更容易,是将模式设置在范围上的variables,并在视图中以ng模式引用它。

    当“checkbox未选中”时,我只需将onChangedcallback中的正则expression式值设置为/.*/(如果未选中)。 ng-patternselect改变,并说“好的,你的价值是好的”。 表格现在是有效的。 我也会从现场删除不好的数据,所以你没有一个明显的坏电话坐在那里。

    我还有其他问题需要,并做了同样的事情。 像魅力一样工作。

    如果ngModel $ viewValue与通过评估属性值中给定的angular度expression式find的RegExp不匹配,则设置模式validation错误键。 如果expression式评估为RegExp对象,则直接使用该expression式。 如果expression式求值为一个string,那么在将它换成^和$字符后,它将被转换成一个RegExp。

    似乎这个问题中最被投票的答案应该更新,因为当我尝试它,它不应用testfunction和validation不工作。

    来自Angular docs的例子对我有好处:

    修改内置的validation器

    HTML

     <form name="form" class="css-form" novalidate> <div> Overwritten Email: <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" /> <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br> Model: {{myEmail}} </div> </form> 

    JS

     var app = angular.module('form-example-modify-validators', []); app.directive('overwriteEmail', function() { var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i; return { require: 'ngModel', restrict: '', link: function(scope, elm, attrs, ctrl) { // only apply the validator if ngModel is present and Angular has added the email validator if (ctrl && ctrl.$validators.email) { // this will overwrite the default Angular email validator ctrl.$validators.email = function(modelValue) { return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue); }; } } }; }); 

    Plunker

    您可以使用网站https://regex101.com/来build立您自己的某个国家的特定模式&#xFF1A;

    例如,波兰:

     -pattern = xxxxxxxxx OR xxx-xxx-xxx OR xxx xxx xxx -regexp ="^\d{9}|^\d{3}-\d{3}-\d{3}|^\d{3}\s\d{3}\s\d{3}"