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

问题描述

我有一个表格，如果一个复选框是假的强制使用的NG-所需指令的文本输入验证。如果该复选框是真实的，现场是隐藏的，需要的NG-设置为false。

问题是，我也有上以及利用NG-模式角度指令输入验证指定一个正则表达式。我遇到的问题是，如果用户在一个无效电话号码填写，检查框，关闭该输入（因此不需要进一步验证）的形式将不允许提交，因为它基础上，NG-模式是无效的。

我试图通过增加一个NG-更改功能设置输入模式为null，但是NG-模式，因此该领域仍然设置为无效的初始设置的复选框以虚假的解决这个问题。如果我不过取消选中该复选框，设置一切回到最初的形式加载，然后再选中该复选框，形式是有效的，可以提交。我不知道我错过了什么。这里是NG-变化code我迄今：

  VAR phoneNumberRegex ​​= / ^ \\（？（\\ d {3}）\\）？[.-]（\\ d {3}）[.-]（\\ D {4}）$ /;
    $ scope.phoneNumberPattern = phoneNumberRegex;
    $ scope.removeValidation =功能（）{
        如果（$ scope.cell._newUser === FALSE）{
            $ scope.request._number ='';
            $ scope.phoneNumberPattern = / [0-9A-ZA-Z] /？;
        }其他{
            $ scope.phoneNumberPattern = phoneNumberRegex;
        }
    };
 

解决方案

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

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

详细信息

我创建了一个新的指令， rpattern ，那就是角的 NG-要求和<$组合C $ C>从 code>输入[类型=文本] 。它的作用是看场的要求属性和正则表达式验证时考虑到这一点，即如果不需要标记字段作为有效图案。

注释

• 大多数code是从角，针对这一需求。


• 当复选框被选中，本场是必需的。


• 字段不隐藏时所需的复选框是假的。


• 常规前pression简化的演示（有效期为3位数字）。

---

A 脏的（但规模较小）的解决方案，如果你不想要一个新的指令，会是这样的：

  $ scope.phoneNumberPattern =（函数（）{
    VAR正则表达式= / ^ \\ [.-]（\\ d {3}）[.-]（\\ d {4}）$ /（（\\ d {3}）\\？）？？？;
    返回{
        测试：函数（值）{
            如果（$ scope.requireTel === FALSE）{
                返回true;
            }
            返回regexp.test（值）;
        }
    };
}）（）;
 

和HTML中没有变化将需要：

 ＆LT;输入类型=文本NG模型=...NG-所需=requireTel
    NG-模式=phoneNumberPattern/＆GT;
 

这其实招数角到调用的我们的测试（）方法，而不是 RegExp.test（），即取要求考虑。

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.

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.

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

解决方案

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

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

Details

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.

Notes

• Most of the code is from Angular, tailored to the needs of this.
• When the checkbox is checked, the field is required.
• The field is not hidden when the required checkbox is false.
• The regular expression is simplified for the demo (valid is 3 digits).

---

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

And in HTML no changes would be required:

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

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

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