angular - Angular 8 中的动态密码验证器

Question

嗨，我有一个 api，它返回一个数组对象passwordPolicy，其中包含

PasswordMinLength: 6
passwordMinLowerCase: 1
passwordMinNumber: 1
passwordMinSymbol: 0
passwordMinUpperCase: 1

数字可以根据用户示例的 Angular 色不断变化

PasswordMinLength: Password min length.
PasswordMinLowerCase: This is currently either 0 or 1  So, if it's returning 1 for example it should have 1 minimum lower case. If it's returning 0 then the check should be ignored for lower case.
PasswordMinUpperCase: Same as above for upper case requirement.
PasswordMinSymbol: Same as above for symbol.
PasswordMinNumber: same as above to determine if a number is required in the password.

我知道我们可以使用正则表达式模式验证进行验证，请参阅下面的内容 How to validate password strength with Angular 5 Validator Pattern

但是当数据不断变化时如何实现动态验证。

我需要验证新的pwdctrlname。

resetPwdForm: FormGroup = new FormGroup({
  newpwdctrlname: new FormControl('', [Validators.required, Validators.minLength(6)]),
  shownewpwdctrlname: new FormControl('', []),
  rptpwdctrlname: new FormControl('', [Validators.required])
});

Answer 1

您可以使用字符串插值动态生成模式

类似于

  passRequirement = {
    passwordMinLowerCase: 1,
    passwordMinNumber: 1,
    passwordMinSymbol: 2,
    passwordMinUpperCase: 1,
    passwordMinCharacters: 8
  };
  pattern = [
    `(?=([^a-z]*[a-z])\{${this.passRequirement.passwordMinLowerCase},\})`,
    `(?=([^A-Z]*[A-Z])\{${this.passRequirement.passwordMinUpperCase},\})`,
    `(?=([^0-9]*[0-9])\{${this.passRequirement.passwordMinNumber},\})`,
    `(?=(\.\*[\$\@\$\!\%\*\?\&])\{${this.passRequirement.passwordMinSymbol},\})`,
    `[A-Za-z\\d\$\@\$\!\%\*\?\&\.]{${
      this.passRequirement.passwordMinCharacters
    },}`
  ]
    .map(item => item.toString())
    .join("");
  resetPwdForm = this.fb.group({
    newpwdctrlname: ['Passwod1@@5', [Validators.required, Validators.pattern(this.pattern)]],
    shownewpwdctrlname: ['', []],
    rptpwdctrlname: ['', [Validators.required]]
  });
  constructor (private fb: FormBuilder) {}

然后您可以将其用作

Validators.pattern(this.pattern)

参见this demo on Stackblitz