Question

我对angular 5还是陌生的，在这里我试图根据某些条件验证用户密码。

至少六个字符，至少一个字母和一个数字
至少八个字符，至少一个字母，一个数字和一个特殊字符
至少八个字符，至少一个大写字母，一个小写字母和一个数字

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

对我来说，以上条件均无法正常工作。

谁能帮我解决这个问题。

注意：如果我直接在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;，并且对所有相似的行也应这样做。这些是变量，不应用作字符串文字。

请参见updated demo。

代码更改：

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

  }

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

1 个答案: