全部
技术
PHP
MySQL
前端
Linux
JAVA
工具
纪念日计算器
邮记星
个人记账
笔记侠
历史上的今天
生日密码
生日书
生日密码
生日花语
博古通今
三十六计
鬼谷子
笑林广记
本草纲目
山海经
唐诗宋词
宋词300首
唐诗300首
退出
登录
注册
编辑文章
选择分类
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); ```
保存文章