Angular2 - Wie benachrichtigt werden, dass eine Komponente den Fokus verliert

In einer Angular2 App habe ich eine Komponente (sagen wir EditForm), die ein Formular darstellt, mit dem ich eine bestimmte Instanz meines Modells bearbeiten kann (sagen wir modelInstance).Angular2 - Wie benachrichtigt werden, dass eine Komponente den Fokus verliert

Es gibt eine Seite, die eine Liste von EditForm Komponenten enthält, damit Benutzer mehr als eine modelInstance auf derselben Seite sehen und möglicherweise bearbeiten können.

Sobald der Benutzer eine EditForm Komponente verlässt (dh der Fokus bewegt sich irgendwo außerhalb der Komponente) möchte ich eine Methode feuern, die die Vollständigkeit und Korrektheit der Dateneingabe in der EditForm Komponente überprüft, die der Benutzer verlassen möchte (etwas wie blur Ereignis aber auf die gesamte Komponente angewendet).

Der Anwendungsfall sieht nur eine Übergabeschaltfläche auf Seitenebene vor, aber ich möchte die Überprüfungslogik immer dann implementieren, wenn ein bestimmter EditForm aufgegeben wird.

Ich kämpfe derzeit um eine elegante Art zu tun, was ich brauche, und ich fürchte, ich übersehe die einfache und saubere Lösung, die vor mir liegt. Jede Hilfe wäre willkommen.

Vielen Dank im Voraus

Quelle

2016-05-04 Picci

Haben Sie versucht, ' ...'? – Simonxca

Warum nicht Sie Ihre Komponente Prüfmethode mit ngSubmit put() und entscheiden, was als nächstes zu tun, auch die Form stoppen einreichen.

<form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">

Angular2 Für jedes Datenvalidierung des Formularelement kann damit entlang binden werden.

Für Angular2, Sie müssen wahrscheinlich ngControl verwenden https://angular.io/docs/js/latest/api/common/NgControl-class.html

Wie sagt in der offiziellen Dokumentation

ngControl mit dem Änderungszustand und die Gültigkeit der Formular-Steuerelemente

Für verfolgen Beispiel

this.username = new Control('Default value', Validators.required, UsernameValidator.checkIfAvailable);

die in Ihrem HTML mit der „ngControl“ Richtlinie

verwendet werden kann

<input required type=”text” ngControl=”username” />

Ein komplettes Tutorial mit Beispiel für angular2 Weise Formularmanagement:https://angular.io/docs/ts/latest/guide/forms.html

das "Live-Beispiel" von doc prüfen (Link oben) kann ein Spielplatz sein, um Ihr Szenario zu testen.

Quelle

2016-05-04 18:00:23

Sie für focusout auf Ihrer Komponente hören und dann prüfen, ob document.activeElement außerhalb des Formulars ist von seinen Eltern laufen, bis Sie die aktuelle Komponente zu erreichen, dann ist es innen oder <body>, dann außerhalb es ist.

Export Klasse MyForm {

@HostListener('focusout', ['$event']) 
    focusout(event) { 
    console.log('focusout', event); 
    // some delay required otherwise `document.activeElement` is not yet set 
    setTimeout(() => { 
     console.log('new focus', document.activeElement); 
    }); 
    } 
    model1 = 'default1'; 
    model2 = 'default2'; 
}

Plunker example (enthält nicht die Innen-/Außenprüfung)

Quelle

2016-05-04 18:30:54

Angular2 - Wie benachrichtigt werden, dass eine Komponente den Fokus verliert

Antwort

Verwandte Themen