我有一个表单,如果一个复选框为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; } };
这是一个有趣的问题,复杂的角度验证。下面的小提琴实现你想要的:
细节
我创建了一个新的指令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" />