Проверка пароля не работает в Angular 5

Question

Я новичок в angular 5, здесь я пытаюсь подтвердить пароль пользователя на основании некоторых условий.

1. Минимум шесть символов, как минимум одна буква и одно число
2. Минимум восемь символов, не менее одной буквы, одного числа и одного специального символа
3. Минимум восемь символов, как минимум одна заглавная буква, одна строчная буква и одна цифра

Пользователь может выбрать один из приведенных выше шаблонов для поля пароля, сообщение об ошибке проверки будет соответствующим образом изменено.

Для меня ни одно из вышеперечисленных условий не работает правильно.

Может кто-нибудь помочь мне решить эту проблему.

Примечание: если я даю шаблон непосредственно в HTML, он работает правильно

app.component.html

<mat-form-field class="col-sm-12">
    <mat-label>Enter your password</mat-label>
    <input matInput placeholder="Password" [pattern]="patternNormal" [formControl]="fPassword" placeholder="Password" required>
    <mat-error *ngIf="fPassword.errors?.required">Please fill out this field</mat-error>
    <mat-error *ngIf="fPassword.errors&&fPassword.errors.pattern">{{errorMgs}}</mat-error>
</mat-form-field>

app.component.ts

export class SnackBarOverviewExample {

  //Minimum six characters, at least one letter and one number:
  patternNormal: any = "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$";

  //Minimum eight characters, at least one letter, one number and one special character:
  patternMedium: any = "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$";

  //Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:
  patternHign: any = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}";

  fEmail = new FormControl();
  fPassword = new FormControl();
  errorMgs: string;
  selectedPattern: string;
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.selectedPattern = 'patternNormal'; //will change based on user preference

    if (this.selectedPattern === 'patternNormal') {
      this.errorMgs = 'Password must have min 6 char,atleast 1 num and 1 char'
    } else if (this.selectedPattern === 'patternMedium') {
      this.errorMgs = 'Minimum eight characters, at least one letter, one number and one special character'
    } else if (this.selectedPattern === 'patternHign') {
      this.errorMgs = 'Minimum eight characters, at least one uppercase letter, one lowercase letter and one number'
    }

  }

Stackblitz URL: https://stackblitz.com/edit/angular-stacb4-5oaagd?file=app%2Fsnack-bar-overview-example.ts

Обновление:

1, примерное значение для первого шаблона - abcde1 (показывает ошибку, но то же значение принимается, когда я даю шаблон непосредственно в HTML).

Answer 1

Есть несколько проблем:

• Удвойте все обратные слеши в шаблонах, например, \d => \\d.
• Нет необходимости использовать два $ в классах символов. Оставьте только одно вхождение как [$$$$$$] = [$].
• this.selectedPattern = 'patternNormal'; следует изменить на this.selectedPattern = this.patternNormal;, и то же самое должно быть сделано для всех подобных строк. Это переменные и не должны использоваться в качестве строковых литералов.

См. Обновленную демоверсию .

Изменения кода:

//Minimum six characters, at least one letter and one number:
patternNormal: any = "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{6,}$";

//Minimum eight characters, at least one letter, one number and one special character:
patternMedium: any = "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{8,}$";

//Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:
patternHign: any = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$";

и

ngOnInit() {
    this.selectedPattern = this.patternNormal; //will change based on user preference

    if (this.selectedPattern === this.patternNormal) {
      this.errorMgs = 'Password must have min 6 char,atleast 1 num and 1 char'
    } else if (this.selectedPattern === this.patternMedium) {
      this.errorMgs = 'Minimum eight characters, at least one letter, one number and one special character'
    } else if (this.selectedPattern === this.patternHign) {
      this.errorMgs = 'Minimum eight characters, at least one uppercase letter, one lowercase letter and one number'
    }

  }