mouseleave输入

Question

在Angular4中如何显示错误输入文本（例如，当mouseleave输入时显示输入...当显示mouseleave输入文本错误时，而不是当我在输入时显示错误时）。

我的代码：

<input type="email" class="form-control" name="email" placeholder="Enter email" [(ngModel)]="data.email" #dataemail="ngModel" required minlength="12" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" >
<div *ngIf="dataemail.errors?.pattern" class="alert alert-danger">Email is invalid</div>

当我尝试在输入电子邮件中键入文本时在div.class="alert alert-danger"中显示错误，但在mouseleave输入电子邮件时如何显示错误。

Answer 1

您需要将updateOn选项设置为'blur'。只有在用户模糊输入后，它才会触发验证。

<input 
  [(ngModel)]="data.email"
  [ngModelOptions]="{ updateOn: 'blur' }" <!-- add this -->
  type="email" 
  class="form-control"
  name="email" 
  placeholder="Enter email"
  #dataemail="ngModel" 
  required 
  minlength="12"
  pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
</div>
<div *ngIf="dataemail.errors?.pattern" class="alert alert-danger">
  Email is invalid
</div>

Live demo