Angularjs 动态 ng 模式验证

Question

我有一个表单，如果复选框为 false，则使用 ng-required 指令强制对文本输入进行验证。如果该复选框为 true，则该字段将被隐藏，并且 ng-required 将设置为 false。

问题是我还有一个用于在输入上指定的验证正则表达式以及利用 ng-pattern Angular 指令。我遇到的问题是，如果用户填写了无效的电话号码，选中该框以停用该输入(因此不需要进一步验证)，该表单将不允许提交，因为根据 ng-pattern 它是无效的。

我尝试通过添加 ng-change 函数将输入模型设置为 null 来解决此问题，但是 ng-pattern 以及因此该字段在复选框初始设置为 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;
        }
    };

Answer 1

这是一个有趣的问题，复杂的 Angular 验证。下面的 fiddle 实现了你想要的:

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

详细信息

我创建了一个新指令 rpattern ，这是 Angular 的 ng-required 的混合体和 ng-pattern代码来自input[type=text] 。它的作用是观看required字段的属性，并在使用正则表达式验证时考虑到这一点，即如果不需要，则将字段标记为 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考虑在内。