验证邮政编码是否允许 Angular 4 中的长度为 5 或 7 位

Question

我正在使用Angular 4。我想允许zipCode输入字段仅接受长度为 5 或 7 位的输入。

网页代码：

<md-input-container class="fill-width-input-wrap">
<input mdInput placeholder="Zip Code" formControlName="zipCode" minLength="5" maxLength="7" (keypress)="allowOnlyNumbers($event)" required>
<md-error *ngIf="clientInformationForm.controls['zipCode'].hasError('required')">
Please enter
<strong>valid zipcode</strong>
</md-error>
<md-error *ngIf="clientInformationForm.controls['zipCode'].hasError('minLength')">
zip code
<strong>minimum length is 5</strong>
</md-error>
</md-input-container>

Answer 1

我想你想要pattern属性

<input mdInput formControlName="zipCode" 
minLength="5" maxLength="7" 
pattern="zipPattern" 
(keypress)="allowOnlyNumbers($event)"
required>
<md-error *ngIf="clientInformationForm.controls['zipCode'].hasError('pattern')">
zip code must satisfy pattern
</md-error>
...

其中zipPattern类似于^d{5}(?:d{2})?$：

const pattern = new RegExp(/^d{5}(?:d{2})?$/)
'1234'.match(pattern) // null
'12345'.match(pattern) // ["12345"
'123456'.match(pattern) // null
'1234567'.match(pattern) // ["1234567"
'12345678'.match(pattern) // null

Answer 2

只需使用默认的模式验证器

.HTML：

<form class="form" [formGroup]="settings_form">    
<input type="number" placeholder="Code postal" formControlName="postalcode"/>
</form>

组件.ts ：

public settings_form : FormGroup
ngOnInit() {
this.settings_form = this.formBuilder.group({
postalcode: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('[0-9]{5}')
)),    
})
}

这是我的进口：

import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

Answer 3

邮政编码验证

<input mdInput formControlName="zipCode" 
minLength="5" maxLength="7" 
pattern="zipPattern" 
(keypress)="allowOnlyNumbers($event)"
required>
<md-error *ngIf="clientInformationForm.controls['zipCode'].hasError('pattern')">
zip code must satisfy pattern
</md-error>
zipPattern = /^[a-zA-Z0-9s]{0,10}$/;

注意：字符串上提供的邮政编码，例如：PO14 1AS英国邮政编码

Answer 4

您可以简单地按照以下内容进行操作，我遵循了最大长度和最大长度的邮政编码字段形式的数字模式：

<input matInput [(ngModel)]="data.loc.zipcode" minlength="2" maxlength="6" pattern="[0-9]*" [errorStateMatcher]="customErrorStateMatcher" formControlName="zipcode" required>