Angular中*ngIf与条件required结合使用及校验残留问题如何解决

Angular 响应式表单的校验规则绑定在TS层的FormControl实例上，模板中使用*ngIf隐藏密码输入框仅会移除对应的DOM元素，FormGroup中的password控件仍然存在，之前配置的必填校验规则不会自动失效。同时模板上绑定的[required]属于HTML原生校验属性，和Angular响应式表单的校验体系不互通，修改该属性无法同步更新TS层的校验规则，因此密码框隐藏后表单仍会因password字段校验不通过无法提交。

方法1：监听复选框状态动态调整校验规则（推荐） #

在表单初始化完成后，订阅passwordUpdate字段的数值变化，动态给password控件添加/移除校验规则：

import { Validators } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

export class YourComponent implements OnInit, OnDestroy {
  // 定义销毁触发器，避免内存泄漏
  private destroy$ = new Subject<void>();
  form: FormGroup;

  ngOnInit() {
    // 表单初始化逻辑...

    // 监听密码更新复选框状态
    this.form.get('passwordUpdate').valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(isUpdatePwd => {
        const pwdControl = this.form.get('password');
        if (isUpdatePwd) {
          // 勾选更新密码，添加必填校验
          pwdControl.setValidators(Validators.required);
        } else {
          // 取消勾选，清空校验规则和控件残留值
          pwdControl.clearValidators();
          pwdControl.setValue(null);
        }
        // 刷新控件校验状态
        pwdControl.updateValueAndValidity();
      });
  }

  ngOnDestroy() {
    // 销毁时取消订阅
    this.destroy$.next();
    this.destroy$.complete();
  }

  // 其他组件逻辑...
}

使用该方案后可以删除模板中input标签上的[required]属性，避免和TS层校验规则冲突。

方法2：提交表单时手动处理校验 #

如果不想新增订阅逻辑，也可以在表单提交时手动处理password字段的错误状态：

onSubmit() {
  const isUpdatePwd = this.form.get('passwordUpdate').value;
  const pwdControl = this.form.get('password');
  
  if (!isUpdatePwd) {
    // 未勾选更新密码时，清空password字段的错误信息
    pwdControl.setErrors(null);
  }

  if (this.form.valid) {
    // 执行表单提交逻辑
  }
}

内容的提问来源于stack exchange，提问作者Marx-rox