Я хочу проверить почтовый индекс с разрешением только 5 или 7 цифр в Angular 4 - PullRequest
Новая
       21

Я хочу проверить почтовый индекс с разрешением только 5 или 7 цифр в Angular 4

0 голосов
/ 23 июня 2018

Это мой HTML-код:

Я использовал угловые 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>

1 Ответ

0 голосов
/ 23 июня 2018

Полагаю, вам нужен атрибут 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
...