从角度输入中聚焦时触发验证？答案

【问题标题】：Fire validation when focus out from input in angular?从角度输入中聚焦时触发验证？
【发布时间】：2018-02-28 01:02:51
【问题描述】：

当我们不断在文本框中输入时，电子邮件验证被触发。我希望当用户关注文本框时触发此验证

下面是我的代码：

<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>

请建议我如何实现这一目标。提前致谢。

【问题讨论】：

您是否还想在输入时删除验证？
我看到您在这里使用的是模型驱动形式。尝试使用反应式表单模块。在那里你可以手动调用验证模糊或焦点。
Template driven forum 在我的整个应用程序中使用。反应式表单模块是实现这一目标的唯一方法吗？
是的，我还想在输入时删除验证
通过链接-@Sam 在下面的答案中提供的github.com/angular/angular/issues/7113，似乎您所能做的就是在显示消息而不是验证调用时进行处理（尤其是使用模板驱动表单）

标签： angular angular-validation angular4-forms

【解决方案1】：

这将在尚未发布的版本 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` });
        }
      });
    }
  }

【讨论】：

嘿，山姆，这个功能在 angular 5/6 中可用吗？如果是，请您编辑答案并说明如何操作。

【解决方案2】：

从版本 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

【讨论】：

【解决方案3】：

如果你使用Angular，你可以这样调用

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

否则，您可以使用

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

【讨论】：