Angular Validator 函数这显示为未定义答案

【问题标题】：Angular Validator function This showing as undefinedAngular Validator 函数这显示为未定义
【发布时间】：2020-02-11 13:53:03
【问题描述】：

我正在使用 Angular FormBuilder 并使用我自己的验证。我有一个 formBuilder...

this.form = this.formBuilder.group({
  password: ['', [Validators.required, this.matcher.strong]],
  confirmPassword: [''],
  action: 'newUser'
},{ validator: this.checkPasswords });

还有 checkPasswords 函数

checkPasswords(group: FormGroup) {
  let pass = group.get('password').value;
  let confirmPassword = group.get('confirmPassword').value;

  this.isTrue = true;
}

当我调用this.isTrue 时，我收到以下错误。 Cannot set property 'isTrue' of undefined。如果我从验证器中删除函数 checkPasswords，那么它就可以正常工作。为什么会这样？

谢谢

【问题讨论】：

您可以从验证器访问您的组件。验证器唯一能做的就是与表单组或表单控件交互。解决它的丑陋方法是在您的方法参考之后添加.bind(this)。但考虑不要使用它。
感谢您的回复，Elia，有什么办法可以解决这个问题吗？当我无法在函数中引用 this.isTrue 时，如何给它一个值？
你能解释一下设置这个属性的目的吗？

标签： angular validation angular-formbuilder

【解决方案1】：

您不能这样做访问this，因为它超出了范围。让我举例说明：

class Foo {
    bar = 'biz'
    a() {
       console.log(this.bar);
        return this.b;
    }
    aWorkaround() {
        return this.b.bind(this);
    }
    b() {
        console.log(this.bar);
    }
}

const obj = new Foo();

const func = obj.a();
// console shows "biz"
func();
// error: cant access bar of undefined

const funcWorkaround = obj.aWorkaround();
funcWorkaround();
// Console shows "biz"

这样做的问题在于，您使代码非常混乱，不可重用（想象在没有此属性的其他组件上使用相同的验证器）。

它会起作用，但如果你需要这样做，可能你的代码变得复杂了。

【讨论】：