Angular8 form表单对隐藏元素取消表单校验规则_angluar隐藏的必填项置为非必填-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41292394/article/details/96636819

本文介绍如何在Angular8中实现动态表单验证，特别是针对登录表单中密码登录与验证码登录的不同需求，通过动态调整表单字段的验证规则来确保表单的有效性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用angular8 的form表单进行开发时，需要做动态的展示内容

场景

用户登录
分为密码登录和验证码登录，当用户使用密码登录时，显示输入密码的输入框，同时隐藏短信验证码输入框，当用户通过短信验证码登录时，显示短信验证码输入框，同时隐藏密码输入框，同时这两个输入框在不同的登录方式上都时必填的，

如果你密码登录，那么密码必填，form表单的校验规则密码字段必须为必填，同时短信验证码字段可以为非必填。
如果验证码登录，那么验证码必填，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/55