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

在使用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/blo...