我有一個表單，如果復選框為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 關注
- 784 瀏覽
添加回答
舉報
0/150
提交
取消