我有一个表单,如果复选框为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; } };
3 回答
DIEA
TA贡献1820条经验 获得超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未设置变量,则第二个输入不仅会被隐藏,而且根本不会被渲染,因此表单将通过验证并且按钮将变为启用状态,您将获得所需的内容。
- 3 回答
- 0 关注
- 751 浏览
添加回答
举报
0/150
提交
取消