角度8中的动态密码验证器

问题描述

嗨，我有一个API，该API返回包含以下内容的数组对象passwordPolicy

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

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

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

但是当数据不断变化时如何动态地进行验证。

我需要验证newpwdctrlname。

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

解决方法

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

类似

  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

,

您应该在验证程序数组中使用正则表达式

以下是在Angular中使用正则表达式的示例：

export class TestComponent implements OnInit {
  private phonePattern = '([0-9]{3})[-]([0-9]{3})[-]([0-9]{4})';
  private emailPattern = '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}';
  public phone: FormControl = new FormControl(
    '',Validators.pattern(this.phonePattern)]
  );
  public email: FormControl = new FormControl(
    '',Validators.pattern(this.emailPattern)]
  );

  public ngOnInit(): void { }
}

您还可以检查以下内容：

Pattern Validation - Angular Doc

Angular pattern validation - StackOverflow

编辑

这是一个如何实现的示例：

export class TestComponent implements OnInit {
  private passwordMinLength: number = 6;
  private passwordMinLowerCase: number = 1;
  private passwordMinNumber: number = 1;
  private passwordMinSymbol: number = 0;
  private passwordMinUpperCase: number = 1;
  private passwordPattern: string;
  
  public password: FormControl = new FormControl(
    '',Validators.pattern(this.passwordPattern)]
  );

  public ngOnInit(): void {
    this.passwordPattern = (
      passwordMinLenght ? REGEXString : '.' +
      passwordMinLowerCase ? REGEXString : '' +
      passwordMinNumber? REGEXString : '' +
      passwordMinSymbol? REGEXString : '' +
      passwordMinUpperCase? REGEXString : ''
    );
  }
}

,

尝试一下。

在角色更改时更改关联的验证器。

xml

根据需要创建自定义验证器。

引荐-https://dzone.com/articles/how-to-create-custom-validators-in-angular