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...