Question

我正在尝试为Angular中的表单实现自定义验证器。如果我可以访问控制器的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)
])

Answer 2

您的角度验证器未引用您的组件属性。要解决此问题，您需要将this绑定到验证程序。

export class HomePage {
    private arr: Array<any>;
    private thevalue: string;
    public thisForm: FormGroup;
    public randomProp: string;
  constructor(
    private modal: ModalController,
    public navCtrl: NavController) {
    this.thevalue = "Initial value";
    this.randomProp = "This is a random property";
    this.thisForm = new FormGroup({
      shortName: new FormControl('', [
        this.validateSuccessShortName.bind(this)
      ])
    });
  }
  validateSuccessShortName(control: AbstractControl) {
      if (control.value.length > this.randomProp.length) {
        return {value: control.value};
      }
      return null;
    }
}

角度-控制器中的自定义验证器功能：如何访问“此”？

2 个答案: