如何为非必填的Angular表单控件添加自定义验证器？

我有两个表单输入控件：

• email（必填）
• message（非必填，可留空）

customValidator 是一个自定义验证函数。email的表单控件代码如下：

email: new FormControl('', [
    Validators.email,
    Validators.required,
    this.customValidator
  ]),

message当前代码为：

message: new FormControl('', [])

当我给message添加同一个customValidator后（代码如下），触发了ExpressionChangedAfterItHasBeenCheckedError错误，错误信息为：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: '[object Object]'.

问题根源是你的customValidator未处理非必填控件的空值场景：当message控件为空时，验证器依然返回了错误对象，导致表单状态在Angular变更检测完成后发生了变化，触发了上述错误。

修改customValidator，在控件值为空（或空字符串）时直接返回null（代表验证通过），示例代码如下：

import { AbstractControl, ValidationErrors } from '@angular/forms';

customValidator(control: AbstractControl): ValidationErrors | null {
  // 非必填控件空值直接通过验证
  if (!control.value || control.value.trim() === '') {
    return null;
  }

  // 你的原有验证逻辑
  const isValidationPassed = /* 这里替换为你的验证条件 */;
  return isValidationPassed ? null : { customInvalid: '自定义验证失败的提示文本' };
}

如果你的customValidator是异步验证器，需确保空值时返回of(null)：

import { AbstractControl, ValidationErrors } from '@angular/forms';
import { of } from 'rxjs';

customAsyncValidator(control: AbstractControl): Observable<ValidationErrors | null> {
  if (!control.value || control.value.trim() === '') {
    return of(null);
  }

  // 你的异步验证逻辑
  return /* 异步验证流 */;
}

内容的提问来源于stack exchange，提问作者BAdQuestionAgain