如何在接受00000-0000或0000的角度材料输入上添加美国邮政编码掩码

Question

我正在寻找一个正则表达式或掩码，允许我使用两种格式(00000-0000或00000)验证角度材质输入。我的代码只允许我输入像这样的邮政编码12345-6789，而不是这个12345。我在用ngx-mask。并使用Angular 7。

 <mat-form-field>
    <input matInput name="zipCode" placeholder="Zip Code" [(ngModel)]="site.zipcode" mask= '00000-0000'>                                               
 </mat-form-field>

Answer 1

Validators.pattern('^[0-9]{2,5}(:|\\-)?[0-9]{3,4}')

在html中

pattern="^[0-9]{2,5}(:|\-)?[0-9]{3,4}"

Answer 2

尝尝这个

更新了答案

首先，我们需要从https://www.npmjs.com/package/angular2-text-mask2安装软件包

使用npm i angular2-text-mask --save

然后将其导入根模块文件中，例如App.module.ts

像这样

import { TextMaskModule } from 'angular2-text-mask';

将其导入@NgModule({})装饰器的imports[TextMaskModule]数组中

并在component.ts文件中

myModel: any;
abcd = [/\d/, /\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/];

在模板文件中

<mat-form-field class="example-full-width">
    <input matInput [textMask]="{mask: abcd}" [(ngModel)]="myModel" placeholder="Type a value">
  </mat-form-field>

我希望这能行得通

Answer 3

使用此正则表达式：

    zipcode = '^[0-9]{5}(?:-[0-9]{4})?$',

TS文件

Validators.pattern(RegexEnum.zipcode)

它将帮助您验证美国邮政编码。

我希望它能起作用。