Показывать сообщение о проверке после выхода из поля ввода либо путем нажатия клавиши мыши, либо в мыши в реактивных формах - PullRequest
Новая
       4

Показывать сообщение о проверке после выхода из поля ввода либо путем нажатия клавиши мыши, либо в мыши в реактивных формах

0 голосов
/ 04 марта 2020

У меня есть форма, в которой я должен показать сообщение проверки, когда я выхожу из поля ввода, если введенный мной шаблон недействителен. Но здесь он показывает сообщение проверки, основанное на вводе ключа, я попробовал с updatedOn: 'blur' внутри файла ts, но оно не сработало и для меня вместе с шаблонами.

Может кто-нибудь мне помочь, заставить его показывать сообщение проверки, когда я выхожу из вкладки.

DEMO: DEMO

HTML: 

<form [formGroup]="userForm" novalidate>
    <div class="form-group">
        <label for="tel">Tel:</label>
        <input id="tel" class="form-control" phoneMask [preValue]="userForm.value.phone"  [phoneControl]="userForm.controls['phone']" formControlName="phone" maxlength="14" 
    [ngClass]="{ 'is-invalid':submitted && detailsInfo.phone.invalid}">     
   <div *ngIf=" detailsInfo.phone.errors" class="invalid-feedback">
                <div *ngIf="detailsInfo.phone.invalid">Please enter valid phone number</div>
              </div>
              <div *ngIf="submitted && detailsInfo.phone.errors" class="invalid-feedback">
                <div *ngIf="detailsInfo.phone.errors.required">Phone number is required</div>
              </div>
    </div>
        <label for="tel">Cell:</label>
        <input id="tel" class="form-control" phoneMask [preValue]="userForm.value.fax"  [phoneControl]="userForm.controls['fax']" formControlName="fax" maxlength="14" 
    [ngClass]="{ 'is-invalid':  detailsInfo.fax.invalid}">      
   <div *ngIf=" detailsInfo.fax.errors" class="invalid-feedback">
                <div *ngIf="detailsInfo.fax.invalid">Please enter valid phone number</div>
              </div>
  <button (click)="save()">Submit</button>
</form>

TS: 

this.userForm = this.fb.group({
      phone:['',[Validators.pattern(/^\(\d{3}\)\s\d{3}-\d{4}$/),Validators.required]],
      fax:['',Validators.pattern(/^\(\d{3}\)\s\d{3}-\d{4}$/)],
    });

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

Я прошел через много ответов, но не нашел способа решить мою проблему.

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Используйте updateOn: 'blur' при объявлении элемента управления

Попробуйте так: 

 this.userForm = this.fb.group({
      phone:['',[Validators.pattern(/^\(\d{3}\)\s\d{3}-\d{4}$/),Validators.required]],
      fax: new FormControl('', {
            validators: [Validators.pattern(/^\(\d{3}\)\s\d{3}-\d{4}$/)], updateOn: 'blur' })
      });
  }

Рабочая демонстрация

0 голосов
/ 04 марта 2020

Если вы работаете в angular Лучший способ сделать это - использовать библиотеку типа

IntlTelInput

Это эссе для настройки и имеет глобальный каталог, в котором вы можете выбрать страну по умолчанию, и он проверяет номер телефона, используя свою базу данных, также форматирует введенный номер в скобках и да sh

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

Не забудьте проголосовать и принять ответ, если он был полезен

...