Angular 6 - Validators pattern not working

Question

I am using a reactive form in angular 6, and trying to do some validation on a password field. Basically it needs to be more than 8 characters, contain at least 1 upper case, and contain at least 1 symbol.

my regex which I have tested, is ^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})

Here is an excerpt from my login component ts:

  ngOnInit() {
        this.loginForm = this.formBuilder.group({
            userName: ['Username', [Validators.required]],
            password: ['Password', [Validators.pattern("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})")]]            
        });
    }

Here is my form group div:

 <div class="form-group">
                      <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">              
                          <div *ngIf="f.password.errors.pattern">Password must contain more than 8 characters, 1 upper case letter, and 1 special character</div>
                      </div>
                  </div>

Basically the password does not validate even if it appears to be correct. Any tips would be appreciated.

Answer 1

ng-pattern seem to take a regExp as parameter (like in angularJs) :

Validators.pattern(new RegExp("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,}))")

You can also use /..../

Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})/)

Should work ;)

Answer 2

I think it's due to the *ngIf condition in your HTML.]

Try *ngIf="loginForm.controls.password.hasError('pattern')"