[英]Validate zipcode to only allow length 5 or 7 digits in Angular 4
I am using Angular 4. I want to allow the zipCode
input field to only take an input of length 5 or 7 digits.我正在使用 Angular 4。我想允许
zipCode
输入字段只接受长度为 5 或 7 位的输入。
HTML code: HTML代码:
<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>
I guess you want pattern
attribute我猜你想要
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>
...
Where zipPattern
is something like ^\\d{5}(?:\\d{2})?$
:其中
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
Zip code validation邮政编码验证
<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-9\s]{0,10}$/;
Note:zip code available on string ex: PO14 1AS UK zip code注意:邮政编码可用于字符串例如: PO14 1AS UK 邮政编码
Just use default Pattern Validator只需使用默认模式验证器
HTML : HTML :
<form class="form" [formGroup]="settings_form">
<input type="number" placeholder="Code postal" formControlName="postalcode"/>
</form>
Component.ts :组件.ts :
public settings_form : FormGroup
ngOnInit() {
this.settings_form = this.formBuilder.group({
postalcode: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('[0-9]{5}')
)),
})
}
And here are my imports :这是我的进口:
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
您可以简单地按照我为最大长度和最大长度的邮政编码字段形式数字模式遵循的以下内容:
<input matInput [(ngModel)]="data.loc.zipcode" minlength="2" maxlength="6" pattern="[0-9]*" [errorStateMatcher]="customErrorStateMatcher" formControlName="zipcode" required>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.