Angularjs动态ng模式验证

发布时间：2020-12-17 09:10:02 所属栏目：安全来源：网络整理

导读：我有一个表单，如果一个复选框为false强制使用ng-required指令对文本输入进行验证。如果该复选框为真，则该字段将被隐藏，并且ng-required将设置为false。问题是，我也有一个正则表达式验证指定的输入以及利用ng-pattern角度指令。我遇到的问题是，如果用户

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

问题是，我也有一个正则表达式验证指定的输入以及利用ng-pattern角度指令。我遇到的问题是，如果用户填写无效的电话号码，检查框以停用该输入(因此不需要进一步验证)，表单将不允许提交，因为它是无效的基于ng模式。

我试图通过添加一个ng-change函数来将输入模型设置为null来解决这个问题，但是ng模式和字段仍然设置为invalid在复选框的初始设置为false。如果我取消选中该框，将所有内容设置为初始形式加载，然后再次选中该框，表单有效并且能够提交。我不知道我失踪了。这里是我到目前为止的ng更改代码：

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

这是一个有趣的问题，复杂的角度验证。下面的小提琴实现你想要的：

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

细节

我创建了一个新的指令rpattern，它是一个混合Angular的ng-required和来自input [type = text]的ng模式代码。它所做的是观察字段的必需属性，并在使用regexp进行验证时将其考虑在内，即如果不需要标记字段为有效模式。

笔记

>大多数代码来自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" />

这实际上把角度转换成调用我们的test()方法，而不是RegExp.test()，需要考虑到需要。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!