Question

我有一个包含用户名，密码和确认密码字段的表单。我正在使用此验证服务来进行这两个检查：

密码不得包含用户名

密码和确认密码字段必须包含相同的“密码”

export class ValidationService {


  static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
    let config = {
      'required': 'Required',

      'invalidPasswordUser': 'Invalid password. Password must not contain the username!',

      'passwordMismatch':'Password mismatch ',
      'minlength': `Minimum length ${validatorValue.requiredLength}`,
      'maxlength': `Maximun length ${validatorValue.requiredLength}`
    };

    return config[validatorName];
  }

 static passwordMatchValidator(control) {

if (control.value) {


  if (control.value === control.parent.value.password) {

    return null;
  }
  else{

    return { 'passwordMismatch': true};

  }
}

}

static usernameCheckValidator（control）{

if (control.value) {

  if (!control.value.toUpperCase().includes(control.parent.value.username.toUpperCase())) {

    return null;
  }
  else{

    return { 'invalidPasswordUser': true};
  }
}

} }

这是表格：

this.userForm = this.formBuilder.group({

      'username': ['',[ Validators.required,Validators.minLength(4),Validators.maxLength(20)]],
      'password': ['', [Validators.required,Validators.minLength(6),ValidationService.usernameCheckValidator,Validators.maxLength(20)]],
      'confirm': ['', [Validators.required,ValidationService.passwordMatchValidator,Validators.maxLength(20)]],
      'profile': ['', [Validators.required]],
    });

关于第一次检查我是否在用户名之前和密码之后写，它将以正确的方式工作，如果密码不正确（因为包含用户名），将显示该消息。相反，如果我第二次更改用户名（e.x我写密码），密码信息将不会出现。第二次检查具有相同的行为。所以，在这一刻，我有一个像“单向”验证器的东西。问题在哪里？

Answer 1

据我所知，当您更改Control本身时，会调用AbstractControl上的验证器函数，这意味着当您更改用户名时它不会检查密码，它只会检查用户名。

解决方案是编写用户名控件的密码验证或一般的表单验证，并检查需要其他字段的验证。类似的东西：

 formValidation(formGroup){
        if(formGroup.value.password.toUpperCase().includes(formGroup.value.username.toUpperCase()) 
              return {someError:'error'}
    }

验证者模型驱动（反应）表单

1 个答案: