Soy nuevo en angular 5, aquí estoy tratando de validar la contraseña del usuario en función de algunas condiciones.

Mínimo seis caracteres, al menos una letra y un númeroMínimo ocho caracteres, al menos una letra, un número y un carácter especialMínimo ocho caracteres, al menos una letra mayúscula, una letra minúscula y un número

El usuario puede elegir uno de los patrones anteriores para el campo de contraseña; el mensaje de error de validación cambiará en consecuencia.

Para mí, ninguna de las condiciones anteriores funciona correctamente.

Alguien puede ayudarme a resolver esto

Nota: si doy el patrón directamente en HTML, está funcionando correctamente

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

Actualización:

1, valor de muestra para el primer patrón - abcde1 (muestra error pero se acepta el mismo valor cuando doy el patrón directamente en HTML).