javascript - Angular - Controller 中的自定义验证器函数 : How to access 'this' ?

Question

我正在尝试为 Angular 中的表单实现自定义验证器。如果我可以访问 Controller 的 this 那就完美了，但它在验证器函数中未定义。

这是我的验证器函数:

validateSuccessShortName(control: AbstractControl) {
      //can't read this.randomProp, because this is undefined
      if (control.value.length > this.randomProp.length) {
        return {value: control.value};
      }
      return null;
    }

这是一个STACKBLITZ演示该问题。

我做错了什么或者这在 Angular 框架中根本不可能吗？

Answer 1

https://stackblitz.com/edit/ionic-tqp9o1?embed=1&file=pages/home/home.ts

为了将来的改进，最好将所有验证移到另一个文件中，并且每个函数的第一个参数必须是配置的。您的验证器不能仅依赖于 this 配置对象

只需更改 this.validateSuccessShortName.bind(this)，因为您缺少上下文

shortName: new FormControl('', [
        this.validateSuccessShortName.bind(this)
])