Проверка огня, когда фокус выходит из ввода в angular?

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

Ниже мой код:

<input class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
 name="Email" type="email" [(ngModel)]="model.Email" #Email="ngModel" required>

<div class="red" *ngIf="Email.errors && (Email.dirty || Email.touched)">
     <div [hidden]="!Email.errors.pattern">
         Please enter a valid email.
     </div>
</div>

Пожалуйста, предложите мне, как я могу достичь этого. Заранее спасибо.


angular angular-validation angular4-forms
person Umang Patwa    schedule 19.09.2017    source источник
comment
Вы также хотите удалить проверку при наборе текста?   -  person Sumit Agarwal    schedule 19.09.2017
comment
Я вижу, что вы используете здесь форму, управляемую моделью. Попробуйте использовать модуль реактивной формы. Там вы можете вызвать проверку вручную на размытие или фокус.   -  person Sumit Agarwal    schedule 19.09.2017
comment
Template driven forum используется во всем моем приложении. Модуль реактивной формы - единственный способ добиться этого?   -  person Umang Patwa    schedule 19.09.2017
comment
да, я также хочу удалить проверку при вводе   -  person Umang Patwa    schedule 19.09.2017
comment
переходя по ссылке - github.com/angular/angular/issues/7113, предоставленной @Sam в ответе ниже, кажется, все, что вы можете сделать, это обработать, когда вы показываете сообщение, а не вызов проверки (особенно с формой, управляемой шаблоном)   -  person Sumit Agarwal    schedule 19.09.2017
comment
Я переключился с управляемых шаблонов на реактивные формы в большом приложении, и это было не так уж сложно сделать.   -  person trees_are_great    schedule 19.09.2017
comment
попробуйте это для управления вашими сообщениями: <div class="validation-message" *ngIf="form.controls['xxx'].isValid && isIdle"> Получил это по ссылке, упомянутой выше   -  person Sumit Agarwal    schedule 19.09.2017

Ответы (3)


arrow_upward
8
arrow_downward

Начиная с версии 6+ проверка полей формы может быть установлена ​​через свойство updateOn.

С формами на основе шаблонов:

<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">

При реактивных формах:

new FormControl('', {updateOn: 'blur'});

И если у вас установлены валидаторы:

new FormControl('', {validators: [Validators.required, Validators.email], updateOn: 'blur'})

Источник: https://angular.io/guide/form-validation#note-on-performance

person mikhail-t    schedule 14.11.2018

arrow_upward
0
arrow_downward

Это будет возможно в версии 5, которая еще не выпущена.

См.: https://github.com/angular/angular/issues/7113.

В это время:

<input class="form-control" formControlName="userName" placeholder="User Name" type="text" (blur)="checkUserExists()"/>
<div class="alert-danger" *ngIf="userName.invalid && userName.touched">
  <div *ngIf="userName.hasError('required')">User Name is required</div>
  <div *ngIf="userName.hasError('userExists')">{{userName.errors.userExists}}</div>
</div>

checkUserExists() {
    if (this.userName.value) {
      this.regServ.userNameExists(this.userName.value)
      .subscribe((exists) => {
        if (exists) {
          this.userName.setErrors({ userExists: `User Name "${this.userName.value}" already exists` });
        }
      });
    }
  }
person trees_are_great    schedule 19.09.2017
comment
Эй, Сэм, эта функция доступна еще в angular 5/6? если да, пожалуйста, можете ли вы отредактировать ответ и показать, как это сделать. - person Saif; 02.08.2018

arrow_upward
0
arrow_downward

если вы используете Angular, вы можете позвонить таким образом

<input type="text" id="sometext" (focusout)="myFunction()">

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

<input type="text" id="sometext" onfocusout="myFunction()">
person Saad Abbasi    schedule 11.01.2021