Question

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

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

但是检查password1和password2总是失败。我也尝试过ofy().save().entities(thing1, thing2, thing3).now();。

===

Answer 1

我将其作为整个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调用或任何昂贵的操作。

Answer 2

我猜这里最好的方法是添加一个自定义验证器来比较两个密码，例如：

// Custom validator
function validateRePassword(control: FormControl){
  const { root } = control;
  const pass = root.get('password'),
        rePass = root.get('rePassword');

  if(!pass || !rePass) {
    return null;
  }

  const passVal = pass.value,
        rePassVal = rePass.value;

  const result = passVal===rePassVal ? null : { passDontMatch: true };
  return result;
}

// Form initialization
this.formGroup = fb.group({
      user: fb.control('UserName'),
      password: fb.control(''),
      rePassword: fb.control('', [validateRePassword])
    })

// function to check if the control has the 'passDontMatch' error and therefore display some related message
passMatch(){
    return !this.formGroup.get('rePassword').hasError('passDontMatch');
  }

Answer 3

即使使用自定义状态匹配器，自定义验证器也不适用于我。

我正在用手检查密码。

<input type="password" formControlName="password" (input)="checkPasswordsMatch()">
<input type="password" formControlName="confirmPassword" (input)="checkPasswordsMatch()">
<p class="error" *ngIf="form.get('confirmPassword').hasError('notSame')"> It works </p>

checkPasswordsMatch(): void {
  const password = this.form.get('password');
  const confirmPassword = this.form.get('confirmPassword');

  if (password.value !== confirmPassword.value) {
    this.form.get('confirmPassword').setErrors({ notSame: true });
  }
}

Answer 4

用户提交表单后，表单值将在this.RegistrationForm.value中作为JSON对象提供。因此，您可以使用它进行比较。

只需使用this.RegistrationForm.value.password1 === this.RegistrationForm.value.password2

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

PS：：如果要创建执行此操作的自定义验证器，请please refer to this OP。

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

4 个答案: