Как устранить ошибку проверки после установки правильных значений ввода с помощью angular8 - PullRequest
Новая
       22

Как устранить ошибку проверки после установки правильных значений ввода с помощью angular8

0 голосов
/ 02 февраля 2020

Я использую реактивные формы, в которых я поставил ошибку проверки номера телефона, если я дал меньше 10 ди git номеров, тогда должно появиться сообщение об ошибке, когда 10 номеров есть, сообщение проверки должно быть спрячет. Но здесь все время этот проверочный номер остается неизменным.

DEMO: DEMO

HTML: 

<div class="form-group">
                <label for="">Phone Number <span class="text-danger">*</span></label>
                <input type="text" class="form-control" placeholder="(###) ### - ####" formControlName="agentPhone"
                  name="phoneNumber" autocomplete="new-phone" (keypress)=_keyPress($event)
                  [ngClass]="{ 'is-invalid': submitted && detailsInfo.agentPhone.errors }" appPhoneMask maxlength="14">
                <div *ngIf="submitted && detailsInfo.agentPhone.errors" class="invalid-feedback">
                  <div *ngIf="detailsInfo.agentPhone.errors.required">Phone number is required</div>
                  <div *ngIf="detailsInfo.agentPhone.errors.pattern">please enter valid Phone number</div>
                </div>
              </div>

Ts: 

  _keyPress(event: any) {
    const pattern = /[0-9]/;
    let inputChar = String.fromCharCode(event.charCode);
    if (!pattern.test(inputChar)) {
        event.preventDefault();

    }
}

this.agentbasicInfoForm = this.FB.group({
        agentPhone: ['', [Validators.required,Validators.pattern('[1-9]\\d{9}')]],
})

1 Ответ

1 голос
/ 02 февраля 2020

Если я правильно вас понял: используйте это регулярное выражение: 

Validators.pattern('^[0-9]{10}$')

или вы можете просто указать его в валидаторе длины 

Validators.minLength(10)
Validators.pattern('^[0-9]*$')

РЕДАКТИРОВАТЬ: я отредактировал ваш код и теперь он работы: https://stackblitz.com/edit/angular6-phone-mask-unmfkc?file=app / app.component. html

...