与 "this" 绑定的验证程序将 FromGroup 显示为未定义

Question

我有一个非常基本的注册表单，我在其中使用 FormGroup 来管理我的 FormControl。我有一个自定义验证程序，用于检查我的密码及其确认是否匹配。为此，我使用了：this.foo.bind(this) 然而，当验证器第一次运行时加载页面（如预期的那样）但是 this （在调试器中显示正确的对象）有两个注入的依赖项但没有别的。因此，它给我一个错误，说我的 formGroup 不存在。

声明：

export class RegisterComponent implements OnInit {
public formGroup = new FormGroup({
    nameController: new FormControl('', [Validators.required]),
    emailController: new FormControl('', [Validators.required, Validators.email]),
    passwordController: new FormControl('', [Validators.required, this.notForbiddenPassword]),
    passwordConfirmController: new FormControl('', [Validators.required, this.passwordConfirmationMatchValidator.bind(this)])
  });

验证者：

passwordConfirmationMatchValidator(confirmation: AbstractControl) {
    return (this.formGroup['passwordController'].value === confirmation.value) ? null : {'passwordDontMatch': true};
  }

这是 Chrome 调试器的屏幕截图

Answer 1

有两种方法可以实现您的目标。

1) 使用 AbstractControl 编写自定义验证器。在你的 component.ts、

formGroup = new FormGroup({
    nameController: new FormControl('', [Validators.required]),
    emailController: new FormControl('', [Validators.required, Validators.email]),
    passwordController: new FormControl('', [Validators.required]),
    passwordConfirmController: new FormControl('', [Validators.required])
  }, {
    validator: PasswordValidation.passwordConfirmationMatchValidator
  });

然后，为您的验证器编写一个单独的 class。您可以使用 AbstractControl.get().value

访问表单组中各种控件的值

class PasswordValidation {

  static passwordConfirmationMatchValidator(AC: AbstractControl) {
    //console.log(confirmation.get('passwordController').value)
    // do the rest here
    let password = AC.get('passwordController').value;
    let confirmPassword = AC.get('passwordConfirmController').value;
    if (password != confirmPassword) {
      AC.get('passwordConfirmController').setErrors({ MatchPassword: true })
    } else {
      return null
    }

  }

}

2) 或者，您可以仅使用绑定的 this.

编写自定义验证器

在你的 component.ts、

public formGroup = new FormGroup({
    nameController: new FormControl('', [Validators.required]),
    emailController: new FormControl('', [Validators.required, Validators.email]),
    passwordController: new FormControl('', [Validators.required, this.notForbiddenPassword]),
    passwordConfirmController: new FormControl('', [Validators.required, this.passwordConfirmationMatchValidator.bind(this)])
  });


passwordConfirmationMatchValidator(formControl: FormControl) {
    // const passwordConfirm = formControl.value;
    .
    .
    .
  }

与 "this" 绑定的验证程序将 FromGroup 显示为未定义

Validator bound with "this" shows FromGroup as undefined

angular

angular-reactive-forms