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/articles/detail/...

本作品采用《CC 协议》，转载必须注明作者和本文链接