angular - 如何编写使用外部数据的自定义验证器 Angular 5

Question

我正在尝试编写一个自定义验证器，在其中检查字段中键入的值是否高于/低于外部对象的属性。这是我的代码:

// defining the user property in the constructor
this.user        = this.authGuard.currentUser();

// This is my FromGroup defined in my init function
this.firstFormGroup = this.formBuilder.group({
  name: ['', Validators.required],
  budget: ['', [Validators.required, Validators.min(10), this.validateBudget]],
  start_date: ['', Validators.required],
  end_date: ['', Validators.required]
});

然后我的验证函数会像这样工作:

validateBudget(c: FormControl) {
const credits = this.user.credits / 100;
let valid = false;

if (credits <  this.secondFormGroup.getRawValue().budget) {
  valid = false;
} else {
  valid = true;
}

return {
  validateBudget: {
    valid: false
  }
};

但是上面的方法不起作用。我收到错误:无法读取未定义的属性用户。 Cannot read property get of undefined 和无数其他错误。我该如何着手编写此验证程序，以便检查用户在预算字段中键入的内容与用户 (this.user) 在 credits 属性中的内容？

Answer 1

你传入一个函数(验证器)稍后执行，但是当它被执行时，this 的上下文丢失了。要使 this 保持在包含表单的组件中，请使用粗箭头函数:

budget: ['', /* */, (c: FormControl) => this.validateBudget(c)]],

或者绑定(bind):

budget: ['', /* */, this.validateBudget.bind(this)]],