title: Angular 6 - reactive form validation pattern doesn't work
body: <p>I have an Angular 6 reactive form and trying to validate a password with regex pattern and it doesn't work.</p>
  
  <pre><code>               &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Password&lt;/label&gt;
                      &lt;input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.password.errors }"
                      /&gt;
                      &lt;div *ngIf="submitted &amp;&amp; f.password.errors" class="invalid-feedback"&gt;
                          &lt;div *ngIf="f.password.errors.required"&gt;Required&lt;/div&gt;
                          &lt;div *ngIf="f.password.errors.pattern"&gt;Not valid&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>The regex I am usng is like this:</p>
  
  <pre><code> ngOnInit() {
       this.registerForm = this.formBuilder.group({
             password: ['', [Validators.required, Validators.pattern('^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&amp;])[A-Za-z\d$@$!%*#?&amp;]{8,}$')]],
  
        });
    }
  </code></pre>
  
  <p>Whatever I enter in the password I get the error message in the ui <code>Not valid</code></p>
  
  <p>Any idea what I am doing wrong?</p>