Question

我正在尝试在我的Angular应用中的表单上设置验证器，以检查两个输入的密码是否相同。我认为Angular documentation并不能很好地解释这一点。

这是我注册组件的一部分：

export function passwordMatchValidator(password: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    return password !== control.value ? { mismatch: true } : null;
  };
}

@Component({
  selector: 'app-sign-up-form',
  templateUrl: './sign-up-form.component.html'
})
export class SignUpFormComponent {
  signUpForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    this.signUpForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      passwordRepeat: [
        null,
        [Validators.required, Validators.minLength(6), passwordMatchValidator(this.password.value)]
      ]
    });
  }

  get email() {
    return this.signUpForm.get('email');
  }

  get password() {
    return this.signUpForm.get('password');
  }

  get passwordRepeat() {
    return this.signUpForm.get('passwordRepeat');
  }

我希望能够在组件的模板中使用以下代码：

<div *ngIf="passwordRepeat.errors.mismatch">
  The passwords are not the same.
</div>

不幸的是有些东西是不对的，因为在控制台中我得到一个奇怪的错误，说实际上没什么用处（TypeError：this.signUpForm是未定义的）

希望你能帮助我。

--- ---更新

constructor(
    private fb: FormBuilder
  ) {
    this.signUpForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      passwordRepeat: [
        null,
        [Validators.required, Validators.minLength(6), passwordMatchValidator(this.password.value)]
      ]
    });
  }

passwordMatchValidator(password: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors => {
      return password !== control.value ? { mismatch: true } : null;
    };
  }

我试图删除fn参数并在验证器fn中弄乱以获取原始密码，但我没有尝试过。

Answer 1

在此处设置验证器时：

  passwordRepeat: [
    null,
    [Validators.required, Validators.minLength(6), passwordMatchValidator(this.password.value)]
  ]

当前值this.password.value是传递给验证器的值 - 可能只是null或空字符串。这是重复密码与之相比的唯一内容。以后输入原始密码字段的内容不会被跟踪。

您需要一个在SignUpFormComponent实例范围内的验证程序，该验证程序可以在更改时与原始密码字段进行比较。

更新

我在想的应该是这样的：

constructor(
    private fb: FormBuilder
  ) {
    this.signUpForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      passwordRepeat: [
        null,
        [Validators.required, Validators.minLength(6), passwordMatchValidator(this)]
      ]
    });
  }

static passwordMatchValidator(comp: SignUpFormComponent): ValidatorFn {
    return (control: AbstractControl): ValidationErrors => {
      return comp.password.value !== control.value ? { mismatch: true } : null;
    };
  }

密码匹配验证器无法正常工作

1 个答案: