Angular8中自定义验证程序到常规函数的转换

这里有一个角度自定义验证器。 问题是它永远不会返回null。所以我明白这个“函数”不能是验证器。 以下是有角度的HTML：

      <form [formGroup]="setpw">
    <p>
      <mat-form-field appearance="outline">
        <mat-label>Password</mat-label>
        <input matInput formControlName="password" class="form-control" />
      <p class="pw-strength">Password Strength: {{ setpw.get('password').errors['passwordStrength'] }} 
      </p>
     </form>

暗语
密码强度：{{setpw.get（'Password'）。错误['passwordStrength']}

（删除了不必要的代码）

以下是验证程序：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function PasswordStrengthValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    let value: string = control.value || '';

    if (!value) {
      return null;
    }

    let upperCaseCharacters = /[A-Z]+/g;
    let lowerCaseCharacters = /[a-z]+/g;
    let numberCharacters = /[0-9]+/g;
    let specialCharacters = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
    let s = 0;
    if (upperCaseCharacters.test(value) == true) {
      s++;
    }
    if (lowerCaseCharacters.test(value) == true) {
      s++;
    }
    if (numberCharacters.test(value) == true) {
      s++;
    }
    if (specialCharacters.test(value) == true) {
      s++;
    }

    if (s === 0) {
      return { passwordStrength: '' };
    }

    if (s === 1) {
      return { passwordStrength: 'Weak' };
    }

    if (s === 2) {
      return { passwordStrength: 'Medium' };
    }
    if (s === 3) {
      return { passwordStrength: 'Strong' };
    }
    if (s > 3) {
      return { passwordStrength: 'Very Strong' };
    }
  };
}

从'@angular/forms'导入{AbstractControl，ValidationErrors，ValidatorFn}；
导出函数PasswordStrengthValidator（）：ValidatorFn{
return（control:AbstractControl）：{[key:string]：any}| null=>{
let value:string=control.value | |“”；
如果（！值）{
返回null；
}
让大写字符=/[A-Z]+//g；
设小写字符=/[a-z]+//g；
设numberCharacters=/[0-9]+//g；
让特殊字符=/[！@$%^&*（）\+\-=\[\]{}；'：“\\\\\，.\/？]+/；
设s=0；
if（大写字符.测试（值）=true）{
s++；
}
if（小写字符测试（值）==true）{
s++；
}
if（numberCharacters.test（value）==true）{
s++；
}
if（specialCharacters.test（值）==true）{
s++；
}
如果（s==0）{
返回{passwordStrength:''}；
}
如果（s==1）{
返回{passwordStrength:'Weak'}；
}
如果（s==2）{
返回{passwordStrength:'Medium'}；
}
如果（s==3）{
返回{passwordStrength:'Strong'}；
}
如果（s>3）{
返回{passwordStrength:'非常强'}；
}
};
}

正如您所见，它是一个基本的验证器，运行良好。 我想把这个验证器转换成一个函数，我已经尝试了一些方法，但没有成功。 函数需要从表单组内的表单控件获取输入，并执行与验证器相同的操作。

---

谢谢。

侦听valueChange Observable以从输入元素获取更新的值，并可以在回调中写入验证逻辑

this.setpw.get('password').valueChanges.subscribe(data => {
  console.log(data);
})

---

除非将参数传递给父函数，否则不必包装验证器函数。您可以像这样直接定义它：

export function PasswordStrengthValidator(control: AbstractControl): { [key: string]: any } | null {
   ....
  }