一尘不染

AngularJS动态ng模式验证

angularjs

我有一种形式,如果复选框为false,则使用ng-required指令对文本输入强制执行验证。如果复选框为true,则该字段被隐藏,并且ng-
required设置为false。

问题是我还使用ng-pattern
angular指令在输入上指定了用于验证的正则表达式。我遇到的问题是,如果用户填写了无效的电话号码,请选中该框以停用该输入(因此无需进一步验证),则该表单将不允许提交,因为基于ng模式,该表单无效。

我试图通过添加ng-change函数将输入模型设置为null来解决此问题,但是ng-
pattern以及该字段在复选框的初始设置为false时仍设置为invalid。但是,如果我取消选中该框,将所有内容都设置为初始表单加载,然后再次选中该框,则该表单有效并且可以提交。我不确定我缺少什么。这是我到目前为止拥有的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;
        }
    };

阅读 243

收藏
2020-07-04

共1个答案

一尘不染

这是一个有趣的问题,复杂的Angular验证。以下小提琴实现了您想要的:

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

细节

我创建了一个新指令,rpattern该指令是Angular的代码ng-required和的ng- pattern代码的混合input[type=text]。它的作用是监视required字段的属性,并在使用regexp进行验证时将其考虑在内,即,如果不需要,则将字段标记为valid- pattern

笔记

  • 大多数代码来自Angular,是针对此需求量身定制的。
  • 选中复选框后,此字段为必填字段。
  • 当必需的复选框为false时,不会隐藏该字段。
  • 该演示的正则表达式已简化(有效为3位数字)。

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

$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(),将其required考虑在内。

2020-07-04