立刻有
全部
技术
PHP
MySQL
前端
Linux
JAVA
退出
编辑文章
选择分类
PHP
MySQL
前端
Linux
Java
工具
选择专栏
设计模式
java基础
Angular学习
Java面试题
描述:
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); ```
保存文章