Динамический валидатор паролей в angular 8

Привет, у меня есть 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.

Я знаю, что мы можем выполнить проверку, используя проверку шаблона регулярного выражения, как показано ниже: Как проверить надежность пароля с помощью шаблона валидатора Angular 5

но как добиться проверки ДИНАМИЧЕСКИ, когда данные постоянно меняются.

Мне нужно проверить newpwdctrlname.

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

person Margerine    schedule 20.10.2020    source источник
comment
angular.io/api/forms/Validators   -  person Asaf    schedule 20.10.2020
comment
Привет, это встроенные валидаторы в angular, кроме того, что вы можете использовать настраиваемое регулярное выражение ...   -  person Asaf    schedule 20.10.2020


Ответы (3)


Вы можете сгенерировать шаблон динамически, используя интерполяцию строк

Что-то вроде

  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)

См. эту демонстрацию на Stackblitz

person Owen Kelvin    schedule 20.10.2020
comment
Он не будет проверять aaDa, если lowerCaseLength = 3, хотя он включает 3 строчных символа - person Eray Ismailov; 20.10.2020
comment
@ErayIsmailov см. Ниже stackblitz.com/edit/dynamic-password-requirement-yxxkge Подход оправдывает ожидания - person Owen Kelvin; 22.03.2021

Попробуй это.

Измените связанный валидатор при изменении роли.

import { CustomValidators } from 'ng2-validation';
    //add or remove validator dynamically

    onRoleChange($role ){
    if(role == 'admin')
   { this.resetPwdForm.get('newpwdctrlname').setValidators([Validators.min(3),Validators.required]);
}
else if(role == 'not admin'){
this.resetPwdForm.get('ewpwdctrlname').setValidators([Validators.required, Validators.pattern('<Pattern>'), CustomValidators.equalTo(password]);
}

    }

создавать собственные валидаторы по мере необходимости.

Обратитесь - https://dzone.com/articles/how-to-create-custom-validators-in-angular

person Ayush Vipul    schedule 20.10.2020
comment
PasswordMinLength: 6 passwordMinLowerCase: 1 passwordMinNumber: 1 passwordMinSymbol: 0 passwordMinUpperCase: 1 значение этого свойства постоянно меняется. это может быть 1 или 0. Исходя из этого, мне нужно проверить. Как я могу это сделать? - person Margerine; 20.10.2020
comment
используйте настраиваемые валидаторы и предопределенные валидаторы и измените стратегию проверки для элемента управления формы во время выполнения. Пример обновлен - person Ayush Vipul; 20.10.2020

Вы должны использовать регулярное выражение в своем массиве валидаторов

Вот пример того, как использовать регулярное выражение в 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.required, Validators.pattern(this.phonePattern)]
  );
  public email: FormControl = new FormControl(
    '',
    [Validators.required, Validators.pattern(this.emailPattern)]
  );

  public ngOnInit(): void { }
}

Вы также можете проверить это:

Проверка шаблона - Angular Doc

Проверка углового шаблона - 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.required, Validators.pattern(this.passwordPattern)]
  );

  public ngOnInit(): void {
    this.passwordPattern = (
      passwordMinLenght ? REGEXString : '.' +
      passwordMinLowerCase ? REGEXString : '' +
      passwordMinNumber? REGEXString : '' +
      passwordMinSymbol? REGEXString : '' +
      passwordMinUpperCase? REGEXString : ''
    );
  }
}
person Leccho    schedule 20.10.2020
comment
PasswordMinLength: 6 passwordMinLowerCase: 1 passwordMinNumber: 1 passwordMinSymbol: 0 passwordMinUpperCase: 1 значение этого свойства постоянно меняется. это может быть 1 или 0. Исходя из этого, мне нужно проверить. Как я могу это сделать? - person Margerine; 20.10.2020
comment
Просто отредактировал мой ответ на вашу потребность, вам просто нужно создать регулярное выражение. - person Leccho; 20.10.2020