我有一個(gè)表單，如果復(fù)選框?yàn)閒alse，則使用ng-required指令對文本輸入強(qiáng)制執(zhí)行驗(yàn)證。如果復(fù)選框?yàn)閠rue，則隱藏該字段，并將ng-required設(shè)置為false。問題是我還在輸入上指定了驗(yàn)證的正則表達(dá)式，并使用了ng-pattern angular指令。我遇到的問題是，如果用戶填寫了無效的電話號(hào)碼，請選中該框以停用該輸入（因此無需進(jìn)一步驗(yàn)證），表單將不允許提交，因?yàn)樗趎g-pattern無效。我嘗試通過添加ng-change函數(shù)來將輸入模型設(shè)置為null來解決此問題，但是ng-pattern和字段仍然在復(fù)選框的初始設(shè)置為false時(shí)設(shè)置為無效。但是，如果我取消選中該框，將所有內(nèi)容設(shè)置回初始表單加載，然后再次選中該框，表單有效并且能夠提交。我不確定我錯(cuò)過了什么。這是我到目前為止的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貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超2個(gè)贊
沒有采取任何遠(yuǎn)離尼科斯的真棒答案，也許你可以更簡單地做到這一點(diǎn)：
<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>
注意第二個(gè)輸入：我們可以使用a ng-if來控制表單中的呈現(xiàn)和驗(yàn)證。如果requireTel未設(shè)置變量，則第二個(gè)輸入不僅會(huì)被隱藏，而且根本不會(huì)被渲染，因此表單將通過驗(yàn)證并且按鈕將變?yōu)閱⒂脿顟B(tài)，您將獲得所需的內(nèi)容。
- 3 回答
- 0 關(guān)注
- 782 瀏覽
添加回答
舉報(bào)
0/150
提交
取消