Angular 15自定义异步验证器报错：Type 'null'无法赋值给ValidationErrors

错误原因 #

你声明的异步验证器返回类型为Observable<ValidationErrors>，但实际逻辑中返回了{ titleAlreadyExists: boolean; } | null。TypeScript不允许将null赋值给ValidationErrors类型（该类型要求是键值对形式的错误对象），因此抛出类型不匹配的报错。

修正方案 #

1. 将验证器的返回类型修改为Observable<ValidationErrors | null>，匹配Angular异步验证器的合法返回值规则（验证通过返回null，失败返回错误对象）。
2. 把String改为TypeScript推荐的原始类型string，避免不必要的类型差异。

修正后的代码 #

alreadyExistingTitle(alreadyExistingTitles: string[]): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return of(alreadyExistingTitles.includes(control.value))
      .pipe(
        map((result: boolean) =>
          result ? { titleAlreadyExists: true } : null
        )
      );
  };
}

补充说明 #

Angular的AsyncValidatorFn类型本身允许返回Observable<ValidationErrors | null | undefined>：

• 当验证通过时，返回null或undefined
• 当验证失败时，返回包含具体错误标识的ValidationErrors对象

内容的提问来源于stack exchange，提问作者Tamsin-chan