(change) vs (ngModelChange) in Angular: Was wählen im Jahr 2024?

Einleitung: Warum dieses Thema Stack Overflow sprengt?

\n\n

Wenn Sie jemals in Angular gearbeitet und Änderungen in einem <input> verarbeitet haben, sind Ihnen sicherlich zwei ähnliche Ereignisse begegnet: (change) und (ngModelChange). Auf den ersten Blick – dasselbe. In der Praxis steckt der Teufel im Detail. Die Frage "(change) vs (ngModelChange) in Angular" sammelt tausende Aufrufe auf Stack Overflow, und das nicht ohne Grund: Die falsche Wahl führt zu Bugs, unnötigen Serveranfragen und schlaflosen Nächten.

\n\n

In diesem Artikel auf PythonLib klären wir ein für alle Mal:

\n

\n
• Was ist der Unterschied zwischen (change) und (ngModelChange) in Angular?
\n
• Wann verwendet man welches?
\n
• Wie vermeidet man typische Fallstricke?
\n

\n

Los geht's! 🚀

\n\n

Kurz erklärt: Was sind (change) und (ngModelChange)?

\n\n

(change) – das ist ein standardmäßiges DOM-Ereignis, das ausgelöst wird, wenn ein Element den Fokus verliert (blur) und sich sein Wert geändert hat. Angular kapselt lediglich das native change-Ereignis.

\n\n

(ngModelChange) – das ist ein Ereignis der Direktive ngModel. Es wird jedes Mal ausgelöst, wenn sich das Modell ändert – buchstäblich bei jedem Tastendruck (sofern nicht ngModelOptions verwendet wird).

\n\n

Wichtig: ngModelChange kann nicht ohne [(ngModel)] verwendet werden. Es ist Teil der Zwei-Wege-Bindung.

\n\n

Hier ein minimales Beispiel in TypeScript, um den Unterschied zu sehen:

\n\n

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [ngModel]="name"\n      (ngModelChange)="onNgModelChange($event)"\n      (change)="onChange($event)"\n      placeholder="Geben Sie den Namen ein">\n    <p>Wert: {{ name }}</p>\n  `\n})\nexport class AppComponent {\n  name = '';\n\n  onNgModelChange(value: string) {\n    console.log('ngModelChange:', value);\n  }\n\n  onChange(event: Event) {\n    console.log('change:', (event.target as HTMLInputElement).value);\n  }\n}\n

\n\n

Versuchen Sie, "Angular" einzugeben – Sie werden sehen: ngModelChange wird 7 Mal ausgelöst (pro Buchstabe), change dagegen nur einmal, wenn Sie außerhalb des Feldes klicken.

\n\n

Hauptunterschiede: Vergleichstabelle

\n\n

Zur Veranschaulichung hier eine Tabelle der wichtigsten Unterschiede zwischen (change) vs (ngModelChange):

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Kriterium	(change)	(ngModelChange)
Ereignistyp	Natives DOM-Ereignis	Angular-Ereignis (EventEmitter)
Wann wird es ausgelöst	Bei Fokusverlust + Wertänderung	Bei jeder Modelländerung (jede Eingabe)
Wert in $event	Event-Objekt (value muss extrahiert werden)	Neuer Modellwert (String, Zahl usw.)
Abhängigkeit von ngModel	Nicht erforderlich (kann auf jedem input verwendet werden)	Erfordert [(ngModel)] oder [ngModel]
Leistung	Hoch (wird selten ausgelöst)	Kann häufig sein (bei jedem Tastendruck)
Verwendung mit Formularen	Reaktive Formulare, template-driven	Nur template-driven Formulare

\n\n

Wann sollte man (change) verwenden?

\n\n

(change) ist Ihre Wahl, wenn:

\n

\n
• Sie nur reagieren müssen, wenn das Feld den Fokus verliert und sich der Wert geändert hat.
\n