javascript - vis feil når musen forlater input

I Angular4, hvordan viser jeg feilinndata tekst (for eksempel kreves inndata når musen forlater inndata ... når musen forlater inndata vises tekstfeilen, og ikke når jeg er i inndataen viser jeg feilen).

Min kode:

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

Feil vises i div.class="alert alert-danger" når jeg prøver å skrive tekst i e-postfeltet, men hvordan viser jeg feil når musen forlater e-postfeltet.

Svar #1

Du må sette updateOn-alternativet til 'blur'. Det vil utløse valideringen først etter at brukeren forlater inputfeltet.

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

Direktesendt demo

Relaterte artikler