Angularjs动态ng模式验证

Question

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

问题是，我在输入上还指定了一个用于验证的正则表达式，并且使用了ng模式角度指令。我遇到的问题是，如果用户填写了无效的电话号码，请选中该框以停用该输入（因此无需进一步验证），表单将不允许提交，因为它基于ng模式无效。

我试图通过添加一个ng change函数来解决这个问题，将输入模型设置为null，但是ng模式和字段在复选框的初始设置为false时仍然设置为invalid。但是，如果我取消选中该框，将所有内容设置回初始表单加载，然后再次选中该框，则该表单有效并且可以提交。我不确定我错过了什么。以下是我目前掌握的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;
        }
    };

Answer 1

使用的模式：

 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">

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>

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

Answer 3

这是一个有趣的问题，复杂的角度验证。以下小提琴实现了您想要的功能：

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

我创建了一个新的指令，rpattern，它是Angular的所需ng和来自输入[类型=文本]的ng模式的混合。它所做的是观察字段的“必需”属性，并在使用regexp进行验证时将其考虑在内，即如果不需要，则将字段标记为有效模式。

• 大部分代码都是从角度出发的，是根据这个需求定制的

如果不需要新的指令，脏的（但较小的）解决方案如下：

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

在超文本标记语言中，不需要更改：

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

这实际上欺骗了angular调用我们的test（）方法，而不是RegExp。test（），将所需的代码考虑在内。