在Angular 5中，密码验证不起作用

Question

我是angular 5的新用户，在这里我试图根据一些条件来验证用户密码。

< li >最少六个字符，至少一个字母和一个数字 < li >最少八个字符，至少一个字母、一个数字和一个特殊字符 < li >最少八个字符，至少一个大写字母、一个小写字母和一个数字

用户可以为密码字段选择上述模式之一，验证错误消息将相应地更改。

对我来说，上述条件都不能正常工作。

有人能帮我解答一下吗？

注意：如果我直接用超文本标记语言给出模式，它就可以正常工作。

app.component.html应用程序组件.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>

应用程序组件.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/snack-酒吧概览示例.ts

更新：

1，第一个模式的示例值- abcde1(显示错误，但当我直接在HTML中给出模式时，接受相同的值)。

Answer 1

有几个问题:

• 将模式中的所有反斜杠加倍，例如\d=

查看更新的演示。

代码更改:

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

  }