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

Question

这是我有一个Angular Custom Validator。 问题是它永远不会返回 null。所以我明白这个"函数"不能成为验证器。 这是 Angular 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>

(删除了不必要的代码(

这是验证器：

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' };
    }
  };
}

如您所见，这是一个基本的验证器，工作正常。 我想将此验证器转换为函数，我尝试了几种方法但没有运气. 该函数需要从表单组内的表单控件获取输入，并执行与验证器相同的操作。 谢谢。

Answer 1

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

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

Answer 2

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

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