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

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

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

细节

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

笔记

• 大多数代码来自Angular,根据需要量身定制.
• 选中该复选框后,该字段是必填字段.
• 当required复选框为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()考虑required到这一点.

Answer 2

没有采取任何远离尼科斯的真棒答案,也许你可以更简单地做到这一点:

<form name="telForm">
  <input name="cb" type='checkbox' data-ng-modal='requireTel'>
  <input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/>
  <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
</form>

注意第二个输入:我们可以使用a ng-if来控制表单中的呈现和验证.如果requireTel未设置变量,则第二个输入不仅会被隐藏,而且根本不会被渲染,因此表单将通过验证并且按钮将变为启用状态,您将获得所需的内容.

Answer 3

二手图案:

 ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"

使用的参考文件:

 '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>'

输入示例:

 <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">