title: Angular reactive form IP address validator
body: <p>Hellow, i'm try to use a validator for an IP address in angular. However, it seems that even if i inputted an invalid ip address i.e <code>12.2.2.2...</code>, GUI shows it is valid (see pic). however, console logs shows that it is a pattern mistmatch (this means that it detected an incorrect pattern). I am not sure what i am missing. starting to get confused now. Need a new pair of eyes to spot the defect.</p>
  <p>Please note that the required part is already working with <code>ipaddress</code>. I am just confused as to whay it isn't working on pattern validation. See image</p>
  <p><a href="https://i.stack.imgur.com/uyh7d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uyh7d.png" alt="enter image description here" /></a></p>
  <p>See my <a href="https://stackblitz.com/edit/bs-stepper-angular-gkhyrw" rel="nofollow noreferrer">stackblitz</a></p>
  <p>Here is my code</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;form-group row required&quot; [ngClass]=&quot;{
    'is-invalid': ipaddress.invalid &amp;&amp; (ipaddress.dirty || ipaddress.touched),
    'is-valid': ipaddress.valid &amp;&amp; (ipaddress.dirty || ipaddress.touched)
  }&quot;&gt;
    &lt;label for=&quot;ipaddress&quot; class=&quot;col-sm-3 col-form-label&quot;&gt;IP Address&lt;/label&gt;
    &lt;div class=&quot;col-sm-7&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;IP Address&quot;
          id=&quot;ipaddress&quot; name=&quot;ipaddress&quot; formControlName=&quot;ipaddress&quot;
          ngbAutofocus required&gt;
      &lt;div class=&quot;form-control-feedback invalid-feedback&quot;
          *ngIf=&quot;ipaddress.errors&quot;&gt;
        &lt;p *ngIf=&quot;ipaddress.errors.required&quot;&gt;IP Address is required&lt;/p&gt;
        &lt;p *ngIf=&quot;ipaddress.errors.pattern&quot;&gt;Invalid IP Address format&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>TS File</strong></p>
  <pre><code>  this.ipaddress = new FormControl('', {
        validators: Validators.compose([
          Validators.required,
          Validators.pattern('(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)')
        ])
      });
  </code></pre>