angular - FormGroup 获取字段值：TypeError：无法读取未定义的属性“get”

Question

我正在尝试对“passwordConfirm”字段进行验证，但出现了一个错误：ERROR TypeError: Cannot read property 'get' of undefined 这是我的代码：

loginForm: FormGroup;


ngOnInit(){
    this.loginForm = new FormGroup({
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'password': new FormControl(null, Validators.required),
      'passwordConfirm': new FormControl(null, [Validators.required, this.checkIfMatchingPasswords.bind(this)]),
    });
}



checkIfMatchingPasswords() {
    return this.loginForm.get('password').value === this.loginForm.get('passwordConfirm').value ? null : { notSame: true} // error
  }

Answer 1

您试图通过绑定this到验证器来实现的目标可能会失败，因为多个验证器函数被合并到一个上下文可能不同的函数中。

但是，如果您遵循验证器函数的足迹，则可以执行以下操作：

checkIfMatchingPasswords(control: AbstractControl): ValidationErrors | null {
    return control.root.get('password').value === control.value ? null : { notSame: true };
}

诀窍是每个人都AbstractControl知道它的parent和root。

Answer 2

解决方案是检查 loginForm 是否存在。如果我做一个console.log，this.loginForm它会执行三遍。第一次未定义，并导致错误。我不知道为什么会这样，也许那是 Angular 的生命周期钩子。

  checkIfMatchingPasswords() {
    if (this.loginForm) {
      return this.loginForm.get('password').value === this.loginForm.get('passwordConfirm').value ? null : {notSame: true};
    }
  }