0

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

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

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 is undefined）

希望您能够帮助我。

- -更新 - -

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 中弄乱以获取原始密码，但我的尝试都没有奏效。

4

1 回答 1

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;
    };
  }
于 2018-05-06T01:15:42.107 回答