Angularjs 动态 ng-pattern 验证 [英] Angularjs dynamic ng-pattern validation

问题描述

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

I have a form that if a checkbox is false enforces validation on a text input using the ng-required directive. If the checkbox is true, the field is hidden and the ng-required is set to false.

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

The problem is that I also have a regex for validation specified on the input as well utilizing the ng-pattern angular directive. The issue I am running into is that if a user fills in an invalid phone number, checks the box to deactivate that input (and consequently needs no further validation) the form will not allow submission as it is invalid based on the ng-pattern.

我试图通过添加一个 ng-change 函数将输入模型设置为 null 来解决这个问题，但是 ng-pattern 和因此该字段在复选框的初始设置为 false 时仍然设置为无效.但是，如果我取消选中该框，将所有内容设置回初始表单加载，然后再次选中该框，则该表单有效并且能够提交.我不确定我错过了什么.这是我迄今为止的 ng-change 代码:

I attempted to resolve this issue by adding an ng-change function to set the input model to null, however the ng-pattern and thus the field is still set to invalid on the initial set of the checkbox to false. If I however uncheck the box, setting everything back to initial form load, then check the box again, the form is valid and able to submit. I am not sure what I am missing. Here is the ng-change code I have thus far:

    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;
        }
    };

推荐答案

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

This is an interesting problem, complex Angular validation. The following fiddle implements what you want:

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

我创建了一个新指令，rpattern，它是 Angular 的 ng-required 和 ng-pattern 代码的混合 >输入[类型=文本].它的作用是观察字段的 required 属性，并在使用正则表达式进行验证时将其考虑在内，即如果不需要，则将字段标记为 valid-pattern.

I created a new directive, rpattern, that is a mix of Angular's ng-required and the ng-pattern code from input[type=text]. What it does is watch the required attribute of the field and take that into account when validating with regexp, i.e. if not required mark field as valid-pattern.

• 大部分代码来自 Angular，专门针对此需求量身定制.
• 选中该复选框后，该字段为必填字段.
• 当必填复选框为 false 时，该字段不会隐藏.
• 为演示简化了正则表达式(有效为 3 位数字).

一个脏(但更小)的解决方案，如果你不想要一个新的指令，会是这样的:

A dirty (but smaller) solution, if you do not want a new directive, would be something like:

$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 中不需要更改:

And in HTML no changes would be required:

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

这实际上欺骗 angular 调用我们的 test() 方法，而不是 RegExp.test()，它接受 需要考虑.

This actually tricks angular into calling our test() method, instead of RegExp.test(), that takes the required into account.

这篇关于Angularjs 动态 ng-pattern 验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！