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

php
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!