绑定到“ 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
  });

然后，为验证器编写一个单独的类。您可以使用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;
    .
    .
    .
  }