Angular7 FormGroup异步校验报错Expected validator to return Promise or Observable求助

• 异步校验器传参错误：你定义的customTableNameValidator是工厂函数，执行后才会返回真正符合要求的校验函数，但你传给FormControl第三个参数时直接传入了工厂函数本身，没有执行它，导致Angular拿到的是函数而非预期的Promise/Observable，触发对应报错。
• 响应值读取错误：服务层templateDuplicate方法的pipe中已经通过map返回了res["message"]布尔值，因此校验器中拿到的流返回值就是布尔值，不需要再读取res["message"]属性，原有写法会拿到undefined导致校验逻辑失效。

方式一：保留现有工厂函数写法，调整传参逻辑 #

修改create-table.component.ts中FormControl初始化代码：

ngOnInit() {
  this.getProducts();

  this.table = new FormGroup({
    tableName: new FormControl('',
      Validators.required,
      // 执行工厂函数，拿到真正的校验器传入
      this.customTableNameValidator.bind(this)()
    ),
  });
}

调整异步校验函数的响应读取逻辑：

customTableNameValidator() {
  return (control: AbstractControl) => {
    return this.dataService.templateDuplicate(control.value).pipe(
      map((res: boolean) => {
        console.log("result : ", res);
        return res ? { templateExist: true } : null;
      })
    );
  };
}

方式二：简化校验器写法，去掉工厂函数嵌套 #

也可以直接把校验器定义为符合Angular要求的格式，不需要额外嵌套：

// 直接定义标准异步校验函数
customTableNameValidator(control: AbstractControl) {
  return this.dataService.templateDuplicate(control.value).pipe(
    map((res: boolean) => {
      console.log("result : ", res);
      return res ? { templateExist: true } : null;
    })
  );
}

// 初始化FormControl时直接传绑定后的函数即可，不需要额外执行
ngOnInit() {
  this.getProducts();
  this.table = new FormGroup({
    tableName: new FormControl('',
      Validators.required,
      this.customTableNameValidator.bind(this)
    ),
  });
}

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