亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

響應式表單上的角度驗證應在為空時打開或關閉,但在輸入為空時不切換

響應式表單上的角度驗證應在為空時打開或關閉,但在輸入為空時不切換

Helenr 2021-09-04 14:51:59
我使用 Angular Reactive Forms 構建了一個簡單的表單。我有一個自定義 Validator 函數,它檢查電話號碼輸入的格式。如果用戶選擇不輸入電話號碼,我想允許空輸入,但如果他們輸入電話號碼,則驗證他們的輸入。為了實現這一點,我訂閱了表單控件上的值更改,并使用該setValidators方法在字段是否為空時切換驗證:phoneControl.valueChanges.subscribe(() => {  if (phoneControl.value === "") {    phoneControl.setValidators(null);  } else {    phoneControl.setValidators(this.phoneValidator());  }});該代碼最初有效,form.valid是真實的。當我輸入一個數字時,它會打開驗證,然后根據我的 RegEx 成功驗證它并顯示錯誤。但是,當我清空該字段時,錯誤不會消失并且表單仍然無效,即使我的代碼應該將驗證器設置為null. 您可以在上面的 StackBlitz 示例中看到這一點。我不明白為什么會這樣。有任何想法嗎?
查看完整描述

3 回答

?
收到一只叮咚

TA貢獻1821條經驗 獲得超5個贊

動態設置驗證器時,我們需要調用updateValueAndValidity(). 還記得添加emitEvent: false,這意味著valueChanges不會被觸發(以防止循環)。因此,將您的代碼更改為:


phoneControl.valueChanges.subscribe(() => {

  if (phoneControl.value === "") {

    phoneControl.setValidators(null);

    // or

    // phoneControl.setValidators([]);

    // or as mentioned by Tilak

    // phoneControl.clearValidators();

  } else {

    phoneControl.setValidators(this.phoneValidator());

  }

  phoneControl.updateValueAndValidity({emitEvent: false});

});


查看完整回答
反對 回復 2021-09-04
?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

我會建議你這樣做 -


if (phoneControl.value === "") {

        phoneControl.clearValidators();

} else {

        phoneControl.setValidators(this.phoneValidator());

}

phoneControl.updateValueAndValidity({emitEvent: false});

清除驗證器比將其設置為 null 更好。


查看完整回答
反對 回復 2021-09-04
  • 3 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號