Javascript 带html 5模式的规则表达式荷兰邮政编码

我有一个Angular 8应用程序，我正在使用

ngForm

制作一个配置文件表单，这样用户就可以自己填写数据，比如邮政编码。我使用邮政编码的正则表达式，比如ddddll（1234AA）

谷歌，教程

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

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

但我现在如何用这个来检查它：

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

我的html模板如下所示：

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

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

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

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>

{{getLabel（'zipCode'）}
邮政编码niet geldig。

问题是，在键入时，模式应该改变。在输入1-2个数字之前，你不能直接告诉模式你期望的是1-4个字母，因为模式在输入时不匹配。它取决于当前值的长度。如果键入的字符少于或等于4个，则模式应为

/^[0-9]{profile.zipCode.length}/i

。从那时起，模式需要匹配：

/^[0-9]{4}[a-z]{profile.zipCode.length-4,2}/i

---

因此，我建议将模式存储在变量中，并根据zipcode的长度进行更改。

好的，我已经解决了。像这样：

zipCodePattern =  /^\d{4} ?[a-z]{2}$/i;

---

你有你的索赔的一些来源吗？当我在这里使用它时，它工作得很好：验证只在点击提交按钮后完成。如果验证器与您的模式匹配，它将返回false。是的，但我的观点是，在我的示例中，验证是在点击提交按钮时完成的。不在按键上。如果您必须动态修改正则表达式，我会非常惊讶。对。他正在使用ngForms并试图验证他的表单。它将不匹配并将字段标记为无效。那么有人有什么建议吗？谢谢你你试过反应式表单而不是模板驱动的表单吗？有一个最小长度的验证器。这绝对与jQuery验证插件无关。请不要“标记垃圾邮件”。编辑，很高兴你解决了。由于工作原因，我没能给你回电话，对不起。

zipCodePattern =  /^\d{4} ?[a-z]{2}$/i;