时间戳

首页 > 解决方案 > 反应形式等同于密码验证

angular - 反应形式等同于密码验证

问题描述

注册按钮仅在 signupForm 有效时启用，但现在我有一个问题，即使密码和确认密码不匹配，该按钮仍处于启用状态

是我的 this.equalWithPasswordValidator。执行错误？

任何想法 ？谢谢。

#html代码

 <button mat-raised-button class="full-width v-btn-lrg mt-0px" color="primary" type="submit"
            [disabled]="signupForm.invalid">
            {{labels.BUTTON.SETUP}}
          </button>

#ts 代码

    this.signupForm = this.fb.group({
      confirmPassword: [
        '',
        [Validators.required, this.equalWithPasswordValidator.bind(this)],
        
      ],
      password: [
        '',
        [
          this.validatePasswordRequired,
          this.validateMinimumPassword,
          this.validatePasswordUpperCase,
          this.validatePasswordLowerCase,
          this.validatePasswordSpecialCharacter,
          this.validateOneNumber,
        ],
      ],
    });
  }

  equalWithPasswordValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const equal = control.value === this.signupForm.get('password').value;
      return equal ? { notEqual: { value: 'Passwords do not match' } } : null;
    };
  }

标签： angulartypescript

解决方案

您需要将验证器应用于 FormGroup，以便您可以访问这两个控件。这是创建验证器以比较两个字段的一种方法...

  // component

  form = new FormGroup({
    password: new FormControl('', [ yourValidators... ]),
    confirmPassword: new FormControl('', [ yourValidators... ])
  }, {
    validators: [ equivalentValidator('password', 'confirmPassword') ]
  });


  // equivalent.validator.ts

  import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
    
  export const equivalentValidator = (firstControlName: string, secondControlName: string): ValidatorFn => {
    
    return (control: AbstractControl): ValidationErrors | null => {
      const firstControl = control.get(firstControlName);
      const secondControl = control.get(secondControlName);
    
      if (secondControl.value && secondControl.value !== firstControl.value) {
        secondControl.setErrors({ notEqual: true });
      }
    
      return null;
    };
    
  };

在此示例中，如果第二个字段与第一个字段不匹配，我只会在第二个字段上设置错误。我没有在此处设置错误消息，而是设置了一个错误，notEqual以便可以跨表单重复使用验证器。

推荐阅读