如何从html中的自定义验证器获取错误？

问题描述

我在 ts 中有这样的形式：

this._logInForm = _formBuilder.group<ILoginModel>({
      userName: ['',{
        validators: [Validators.required,Validators.maxLength(10)],updateOn: 'blur'
      }],password: ['',{
        validators: [PASSWORD_VALIDATOR(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,}$/)],updateOn: 'blur'
      }
      ]
    });

验证器代码：

function PASSWORD_VALIDATOR(correctPattern: RegExp): ValidatorFn {
  return ((control: AbstractControl): { incorrectPassword: RegExp } | null => {
    if (!correctPattern.test(control.value)) {
      return { incorrectPassword: correctPattern };
    }
    return null;
  });
}

HTML：

<p class="login__validation-error" *ngIf="passwordControl.errors!.incorrectPassword && passwordControl.touched">Password must be longer than 5 symbols and must contain 1 digit,1 lowercase and 1 uppercase letter</p>

因此，它给了我一个编译错误：“类型 'ValidatorsModel' 上不存在属性 'incorrectPassword'。”

我明白，但我如何才能在 html 中处理这个错误？除了为自定义验证器编写特定指令并使用它之外，还有其他变体吗？

解决方法

Ts 代码

function PASSWORD_VALIDATOR(correctPattern: RegExp): ValidatorFn {
    return (control: FormControl) => {
    let urlRegEx: RegExp = new RegExp('/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,}$/');
       
        if (control.value && !control.value.match(urlRegEx)) {
            return {
                pattern: 'Password must be longer than 5 symbols and must contain 1 digit,1 lowercase and 1 uppercase letter'
            };
        } else {
            return null;
        }
    }
};

HTML 代码

<p class="login__validation-error" *ngIf="_logInForm .controls['password'].errors.pattern">Password must be longer than 5 symbols and must contain 1 digit,1 lowercase and 1 uppercase letter</p>

形式变化：

 password: ['',PASSWORD_VALIDATOR('password')],// password means formControlName

angular angular customvalidator customvalidator