Blur-Ereignis in Angular

Dieser Artikel stellt das Event blur in Angular mit Beispielen vor.

Unschärfe in Angular

Es gibt viele Situationen, in denen wir möglicherweise blur-Events in Angular verwenden müssen. Beispielsweise möchten wir zum Validieren von Feldern möglicherweise ein bestimmtes Feld validieren, wenn der Fokus des Felds verloren geht.

Angular stellt für solche Situationen blur-Events zur Verfügung.

Das blur-Ereignis wird ausgelöst, wenn ein Element seinen Fokus verliert. Die Syntax des Events blur in Angular ist unten dargestellt.

<input (blur)='DoSomething()'/>

Lassen Sie uns mit dem folgenden Befehl eine neue Anwendung in Angular erstellen.

ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

ng serve --open

In app.component.ts erstellen wir eine Funktion, die bei einem blur-Ereignis ausgelöst wird, wie unten gezeigt.

import { Component } from '@angular/core';

type Fruit = Array<{ id: number; name: string }>;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  blurEvent(): void {
    console.log('Blur event Activated!');
}
}

In app.component.html erstellen wir ein input-Element und setzen ein blur-Event, wie unten gezeigt.

<label>Enter Name:</label>
<input type="text" placeholder="Enter name.." (blur)="blurEvent()">

Lassen Sie uns nun die Angular-App bedienen, indem Sie den folgenden Befehl ausführen.

ng serve

Ausgabe:

Das obige Beispiel zeigt, dass das blur-Ereignis immer dann aktiviert wird, wenn der Fokus von der Eingabe verloren geht.

Demo