带有 html 5 模式的 Angular 中的正则表达式荷兰邮政编码

我有一个 Angular 8 应用程序，我正在处理一个配置文件表单，ngForm以便用户可以填写有关他们自己的数据，例如邮政编码。我正在使用邮政编码的正则表达式，如下所示：ddddll(1234AA) for例子。

谷歌搜索，教程

所以我用这个来检查邮政编码的正则表达式：

<div class="input-group col-4">
  <label for="zipCode">{{ getLabel('zipCode') }}</label>
  <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>
  <span class="help-block alert alert-danger errorColorMessage" [hidden]="zipCode.valid || zipCode.pristine">Postcode kan enkel vier nummers en twee letters bevatten  </span>
</div>

但是错误信息：

<span class="help-block alert alert-danger errorColorMessage" [hidden]="zipCode.valid || zipCode.pristine">Postcode kan enkel vier nummers en twee letters bevatten  </span>

当我开始输入例如数字 1 时，将已经显示。

邮政编码的正则表达式将正常工作。

好吧，我做了一个变量，像这样：

POSTALCODE_REGEXP  = '[1-9][0-9]{3}\s?[a-zA-Z]{2}';

但是我现在如何检查它：

   <div class="input-group col-4">
                  <label for="zipCode">{{ getLabel('zipCode') }}</label>
                  <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>
                  <span class="help-block alert alert-danger errorColorMessage" [hidden]="zipCode.valid || zipCode.pristine">Postcode kan enkel vier nummers en twee letters bevatten  </span>
                </div>

好的，

我做了一个这样的分离函数：

  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 } }
}

我的 html 模板如下所示：

  <div class="input-group col-4">
                  <label for="zipCode">{{ getLabel('zipCode') }}</label>
                  <input type="text" id="zipCode" name="zipCode" #zipCode = "ngModel" [(ngModel)]="profile.zipCode" postalCodeValidator  maxlength=7>

                  <span *ngIf="zipCode.errors">
                    Zip code is invalid
                  </span>


                </div>

好的，

我现在有这样的：

  <div class="input-group col-4">
                  <label for="zipCode">{{ getLabel('zipCode') }}</label>
                  <input type="text" id="zipCode" name="zipCode" #zipCode = "ngModel" [(ngModel)]="profile.zipCode" [pattern]="zipCodePattern"   maxlength=50>
                </div>

一个像这样的 ts 文件：

zipCodePattern = '\d{4}[A-Z][A-Z]';

我也试过这个：

  <div class="input-group col-4">
                  <label for="zipCode">{{ getLabel('zipCode') }}</label>
                  <input type="text" id="zipCode" name="zipCode" #zipCode = "ngModel" [(ngModel)]="profile.zipCode" [pattern]="zipCodePattern"   maxlength=50>
                  <span class="help-block alert alert-danger errorColorMessage"  *ngIf="zipCode.errors?.pattern">
                    Postcode niet geldig.
                  </span>
                </div>