Angular8 form 表單對隱藏元素取消表單校驗規則

波波你行發表於2019-07-20
AngularORM

在使用angular8 的form表單進行開發時，需要做動態的展示內容

場景

  • 使用者登入
    分為密碼登入和驗證碼登入，當使用者使用密碼登入時，顯示輸入密碼的輸入框，同時隱藏簡訊驗證碼輸入框，當使用者透過簡訊驗證碼登入時，顯示簡訊驗證碼輸入框，同時隱藏密碼輸入框，同時這兩個輸入框在不同的登入方式上都時必填的，
    1. 如果你密碼登入，那麼密碼必填，form表單的校驗規則密碼欄位必須為必填，同時簡訊驗證碼欄位可以為非必填。
    2. 如果驗證碼登入，那麼驗證碼必填，form表單的校驗規則簡訊驗證碼欄位必須為必填，同時密碼欄位可以為非必填。

導致的問題

  • 初始化只能設定兩個都為必填，那麼隱藏的欄位，雖然隱藏了，但是form表單的校驗規則還在，導致無法進行表單提交

解決方案

  • 動態表單規則，即透過動態的改變表單驗證規則 
    validateForm: FormGroup;//表單
//密碼登入時，設定驗證碼校驗規則為null，密碼校驗規則為必填
this.validateForm.get('captcha').setValidators(null);
this.validateForm.get('password').setValidators(Validators.required);
//驗證碼登入時，設定密碼校驗規則為null，驗證碼校驗規則為必填
this.validateForm.get('password').setValidators(null);
this.validateForm.get('captcha').setValidators(Validators.required);

    原文：http://www.bowen-tech.top/articles/detail/...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章