时间戳

首页 > 解决方案 > 在 Angular Reactive Form - FormBuilder 中检查相同的密码并确认密码

angular - 在 Angular Reactive Form - FormBuilder 中检查相同的密码并确认密码

问题描述

我正在尝试使用 .NET Core 创建 Angular 5 注册表单。

我正在检查注册表中的密码和重新输入的密码是否相同。我正在使用FormBuilder作为表单。

但是检查 password1 和 password2 总是失败。我也试过了===。

if (this.RegistrationForm.valid) {
  if (this.RegistrationForm.get('password1') == this.RegistrationForm.get('password2')) {
    this.MyService.Register(this.RegistrationForm.value).subscribe((data) => {}, error => this.errorMessage = error)
  } else {
    this.errorMessage = "cdscs";
  }
}

constructor(private fb: FormBuilder, private MyService: RoadSignService) {
        this.RegistrationForm = this.fb.group({
            Id: 0,
            name: ['', [Validators.required]],
            email: ['', [Validators.required]],
            gender: ['', [Validators.required]],
            department: ['', [Validators.required]],
            address: ['', [Validators.required]],
            password1: ['', [Validators.required]],
            password2: ['', [Validators.required]]
        })
    }

图片

标签： angulartypescriptangular-formbuilder

解决方案

我会将其作为整个 FormGroup 的验证器来处理，而不是提交表单，然后进行检查。

当您定义 FormGroup 时，您可以为整个组添加一个验证器，让您可以访问所有控件/值，如下所示：

validatePasswords(formGroup: FormGroup): any {
    const password = formGroup.controls['password'];
    const confirmPassword = formGroup.controls['confirmPassword'];

    // don't validate
    if (password.pristine || confirmPassword.pristine) {
      return null;
    }

    formGroup.markAsTouched();

    if (password.value === confirmPassword.value) {
      return null;
    }

    return confirmPassword.setErrors({
      notEqual: true
    });
  }

form = this.formBuilder.group({
  . . .,
  password: [
    '', [
      Validators.required,
      Validators.pattern(regexPatterns.password),
    ]
  ],
  confirmPassword: [
    '', [
      Validators.required,
      Validators.pattern(regexPatterns.password)
    ]
  ]
}, {
  validator: this.validatePasswords
});

在这个例子中，regexPatterns.password只是一个 RegExp 对象的共享导入，表达式为：/^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&+=*]).*/

现在，您可以在提交表单并调用任何其他逻辑、API 调用或任何昂贵的操作之前向用户显示这两个字段是否匹配。

推荐阅读