title: Regular expression Dutch postal code in Angular with html 5 pattern
body: <p>I have a Angular 8 application and I am working on a profile form with <code>ngForm</code> so that users can fill in data about them self, like a postal cod.e I am using a regular expression for postal code, like this: ddddll(1234AA) for example.</p>
  
  <p>Googled, tutorials</p>
  
  <p>So I have this for checking the regular expression for Postal code:</p>
  
  <pre><code>&lt;div class="input-group col-4"&gt;
    &lt;label for="zipCode"&gt;{{ getLabel('zipCode') }}&lt;/label&gt;
    &lt;input type="text" id="zipCode" name="zipCode" [(ngModel)]="profile.zipCode" #zipCode="ngModel" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" maxlength=7&gt;
    &lt;span class="help-block alert alert-danger errorColorMessage" [hidden]="zipCode.valid || zipCode.pristine"&gt;Postcode kan enkel vier nummers en twee letters bevatten  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the error message:</p>
  
  <pre><code>&lt;span class="help-block alert alert-danger errorColorMessage" [hidden]="zipCode.valid || zipCode.pristine"&gt;Postcode kan enkel vier nummers en twee letters bevatten  &lt;/span&gt;
  </code></pre>
  
  <p>Will be already showing when I start typing for example with the number 1.</p>
  
  <p>That the regular expression for postal code will be working correctly.</p>
  
  <p>Oke, I made a variable, like this:</p>
  
  <pre><code>POSTALCODE_REGEXP  = '[1-9][0-9]{3}\s?[a-zA-Z]{2}';
  </code></pre>
  
  <p>But how do  I check it now with this:</p>
  
  <pre><code>   &lt;div class="input-group col-4"&gt;
                    &lt;label for="zipCode"&gt;{{ getLabel('zipCode') }}&lt;/label&gt;
                    &lt;input type="text" id="zipCode" name="zipCode" [(ngModel)]="profile.zipCode" #zipCode = "ngModel"
                    pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" maxlength=7&gt;
                    &lt;span class="help-block alert alert-danger errorColorMessage" [hidden]="zipCode.valid || zipCode.pristine"&gt;Postcode kan enkel vier nummers en twee letters bevatten  &lt;/span&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Oke, </p>
  
  <p>I made a seperated function like this:</p>
  
  <pre><code>
    import { AbstractControl } from '@angular/forms';
  
  export function postalCodeValidator(
    control: AbstractControl
  ): { [key: string]: any } | null {
    const valid = /(\d{4}[A-Z][A-Z])/.test(control.value);
    return valid
      ? null
      : { invalidNumber: { valid: false, value: control.value } }
  }
  </code></pre>
  
  <p>and my html template looks like this:</p>
  
  <pre><code>  &lt;div class="input-group col-4"&gt;
                    &lt;label for="zipCode"&gt;{{ getLabel('zipCode') }}&lt;/label&gt;
                    &lt;input type="text" id="zipCode" name="zipCode" #zipCode = "ngModel" [(ngModel)]="profile.zipCode" postalCodeValidator  maxlength=7&gt;
  
                    &lt;span *ngIf="zipCode.errors"&gt;
                      Zip code is invalid
                    &lt;/span&gt;
  
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>Oke,</p>
  
  <p>I have it now like this:</p>
  
  <pre><code>  &lt;div class="input-group col-4"&gt;
                    &lt;label for="zipCode"&gt;{{ getLabel('zipCode') }}&lt;/label&gt;
                    &lt;input type="text" id="zipCode" name="zipCode" #zipCode = "ngModel" [(ngModel)]="profile.zipCode" [pattern]="zipCodePattern"   maxlength=50&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>an the ts file like this:</p>
  
  <pre><code>zipCodePattern = '\d{4}[A-Z][A-Z]';
  </code></pre>
  
  <p>I also tried this:</p>
  
  <pre><code>  &lt;div class="input-group col-4"&gt;
                    &lt;label for="zipCode"&gt;{{ getLabel('zipCode') }}&lt;/label&gt;
                    &lt;input type="text" id="zipCode" name="zipCode" #zipCode = "ngModel" [(ngModel)]="profile.zipCode" [pattern]="zipCodePattern"   maxlength=50&gt;
                    &lt;span class="help-block alert alert-danger errorColorMessage"  *ngIf="zipCode.errors?.pattern"&gt;
                      Postcode niet geldig.
                    &lt;/span&gt;
                  &lt;/div&gt;
  </code></pre>