Angular响应式表单自定义跨字段验证器报需返回Promise/Observable错误

报错原因 #

你有两处配置错误导致Angular误将同步校验逻辑识别为异步校验：

1. 单字段校验器配置不符合参数要求
   FormControl的初始化参数顺序为：[初始值, 同步校验器, 异步校验器]，你给password、repeatPassword字段配置多个同步校验器时没有包裹在数组中，导致Validators.minLength(4)被放到了异步校验器的参数位，异步校验器要求返回Promise或Observable，而同步校验器返回的是普通对象/ null，就触发了该报错。
2. 跨字段校验器没有正确调用
   你定义的passwordsValidator是校验器工厂函数，执行后才会返回真正的ValidatorFn校验实例，你配置时直接传入了工厂函数本身，没有执行调用，导致Angular无法识别为合法的同步校验器。

解决方案 #

按如下修改表单配置即可，你的自定义跨字段校验器逻辑本身没有问题，不需要修改：

this.registerThirdForm = this.formBuilder.group({
    username: ['', [Validators.required, Validators.minLength(3)]],
    // 多个同步校验器包裹在数组中
    password: ['', [Validators.required, Validators.minLength(4)]],
    // 多个同步校验器包裹在数组中
    repeatPassword: ['', [Validators.required, Validators.minLength(4)]]
  },
  // 执行passwordsValidator工厂函数拿到实际校验器
  {validators: [passwordsValidator()]});

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