Mit einem kurzen Verständnis von Winkelreaktiven Formen
fahren wir mit der nächsten Übung fort.
In dieser Übung werden wir
eine Winkelreaktive Form in der Winkelanwendung erstellen, an der wir bisher gearbeitet haben.
Auf dem Weg werden wir unser Verständnis von Angular Reactive Forms festigen.
Um mit der Übung zu beginnen,
ist der allererste Schritt, den wir tun müssen,
das Angular Reactive Forms Modul in unser App-Modul zu importieren.
Also, lassen Sie uns zum App-Modul gehen,
und dann sehen wir, dass wir das Formularmodul bereits früher importiert hatten.
Wir werden auch das Angular Reactive Forms Modul importieren.
Also, ich werde das kopieren, das hier einfügen
und dann in das Angular Reactive Forms Modul ändern.
Nachdem wir das getan haben, müssen wir das auch in unseren Dekorateur aufnehmen.
Also, wenn ich hier zum Dekorator gehe,
werde ich das Reaktive Formularmodul in den Dekorator importieren.
Zwei weitere Module, die wir für
unser Formular importieren müssen, sind das MatSelectModule und das MatslideLoggleModule.
Das select-Modul ermöglicht es uns, das select-Element zu verwenden,
und das SlideToggle ermöglicht es uns, den SlideToggle in unserem Formular zu verwenden.
Also, um dies zu tun, geben wir
Import MatSelectModule aus Winkel/Material/select ein
und importieren MatslideToggleModule aus Winkel/Material/Slide-Toggle,
und dann müssen wir sie zu unserem ngModel Dekorator in den Importen hinzufügen.
Also, da unten,
lassen Sie mich das MatSelectModule und MatslideLoggleModule dort importieren.
Mit diesen Änderungen
ist unser App-Modul nun bereit, um es uns zu ermöglichen,
das Reactive Forms Modul in unserer Anwendung zu verwenden.
Im nächsten Schritt,
was ich tun werde, ist, hier eine Klasse zu erstellen, die als Feedback bezeichnet wird.
Also, ich werde es im freigegebenen Ordner im Dateinamen feedback.ts erstellen.
Nun ist dies die Struktur der Klasse, die
das Datenmodell darstellt, das dem Formularmodell entspricht, das wir
innerhalb unserer Angular-Anwendung verwenden werden.
Also erstelle ich die Klasse mit dem Namen feedback.
Innerhalb der Feedback-Klasse
werde ich ein paar Eigenschaften einschließen;
Vorname, Nachname,
dann Telefonnummer, Telnum, E-Mail,
dann stimme ich zu, was eine boolesche Variable,
boolesche Eigenschaft, contacttype, der vom Typ string ist.
Es wird Ihnen klarer werden, warum ich all
diese einschließe, wenn wir uns das Formulardesign selbst ansehen.
Diese spezielle Feedback-Klasse entspricht dem Feedback, das
ein Nutzer über unser Restaurant innerhalb unserer Angular-Anwendung einreichen kann.
Das ist der Grund, warum ich diese Feedback-Klasse erstelle.
Wir werden dies in das Formularmodell in
einer der Komponenten dort abbilden und außerdem
werde ich eine Konstante exportieren, die ein String-Array namens
contacttype ist, das, wie ich
erwähnt habe, ein String-Array ist, das hier drei Strings enthält
, keine, Tel und E-Mail.
Also, jetzt ist unsere Datenmodellstruktur bereit.
Später, wenn wir unsere serverseitige Entwicklung entwickeln,
können wir dies in Daten abbilden, die wir auf der serverseitigen Seite speichern.
Also, innerhalb unserer Angular-Anwendung
bildet dies das Datenmodell, das wir für unsere Anwendung verwenden werden, genau wie das Gericht, der
Führer, und die Förderung, die wir entwickelt haben, ist eine andere Klasse, die
es uns ermöglicht, eine Reihe von Eigenschaften in einer Klasse hier zu gruppieren.
Sobald wir das abgeschlossen haben,
lassen Sie uns mit der Erstellung des Reaktiven Formulars fortfahren.
Wir werden das reaktive Formular in unserer Kontaktkomponente erstellen.
Also, lassen Sie uns auf die Kontaktkomponente.ts Datei gehen,
und wir werden auch
das entsprechende Formular in die Kontaktkomponenten-Vorlagendatei aufnehmen.
Also, in der Kontaktkomponenten Typ Skriptdatei,
also hier werden wir unser Formular vorbereiten,
da wir sahen, dass das reaktive Formular hauptsächlich
im Code gebaut und dann in die Formularelemente in der Vorlagendatei abgebildet ist.
Also, hier werde ich ein paar Klassen importieren.
Ich importiere FormBuilder,
dann FormBuilder und Validatoren.
Validatoren würden für die Formularüberprüfung verwendet werden, die in der nächsten Übung sein wird,
aber ich werde sie im Moment bereits importieren.
Diese werden aus der Angular Forms Library importiert.
Sobald wir dies importieren, importieren wir
die Feedback-Klasse und die Contacttype-Konstante
aus der Shared/Feedback-Datei
, die wir gerade im vorherigen Schritt erstellt haben.
Wir brauchen dies innerhalb unserer Anwendung.
Jetzt, in meiner Klasse hier,
werde ich ein paar Variablen namens FeedbackForm deklarieren, die vom Typ FormGroup ist.
Dies ist das Formularmodell, das
das Reaktive Formular hier hosten wird und dann werde ich auch
eine variable Rückmeldung vom Typ Feedback deklarieren,
also wäre dies das entsprechende Datenmodell.
Später kann dieser Feedback-Wert von einem Server innerhalb unserer Anwendung abgerufen
werden, und dann werde ich auch den contacttype als Variable deklarieren
, die vom contacttype string array ist.
Weil ich dies innerhalb unserer Anwendung nutzen muss.
Um das reaktive Formular innerhalb des Konstruktors zu konstruieren,
würde ich den FormBuilder hier in den Konstruktor injizieren,
und ich würde eine separate Methode namens
CreateForm erstellen, die ich innerhalb des Konstruktors aufrufen werde.
Wenn diese Klasse erstellt wird, wird das Formular erstellt.
Das CreateForm wird also eine Methode sein, in der ich das eigentliche Formular erstellen werde.
Lassen Sie mich hier die CreateForm-Methode hinzufügen.
Dies ist nur Bequemlichkeit, den ich
einfach den Code direkt in den Konstruktor selbst einfügen könnte,
aber Sie werden sehen, dass es Gründe geben könnte, warum Sie
dieses CreateForm von anderen Orten aufrufen müssen.
Also, es ist besser, es hier in eine separate Methode zu setzen.
Also, ich werde das Formular hier erstellen,
reaktives Formular, und dann in die FeedbackForm-Variable einfügen, die ich zuvor deklariert habe.
Um das Formular zu erstellen,
nehme ich die Hilfe des FormBuilders, des
FB, das ich im Konstruktor deklariert habe,
und dann bietet die FB eine Methode namens Group, mit der ich
hier eine Gruppe definieren kann, eine FormGroup.
Also, da drin, jetzt werde ich die Teile der Form dort konstruieren.
Also, innerhalb dieser Gruppe,
jetzt kann ich die verschiedenen Formular-Steuerelemente dort einfügen.
Also würde ich zuerst den Vornamen und
dann den Nachnamen setzen.
Beachten Sie, wie die Felder in meinem Formular
die Felder in meiner Feedback-Klasse genau spiegeln.
Sie müssen nicht genau übereinstimmen, aber wenn sie übereinstimmen,
wird die Übertragung der Daten zwischen dem Datenmodell und den vier Modellen viel einfacher.
Telnum, das ich verlassen werde, weil
ich Vorname, Nachname,
Telnum, E-Mail und zustimmen, und Kontakttyp hinzugefügt habe,
die ich als keine festlegen werde. Denken Sie
daran, dass der Kontakttyp ein String-Array ist, das drei von ihnen enthält,
also sollten Sie einen von ihnen auswählen und ihn dann dieser Eigenschaft hier zuordnen.
Also, ich werde dies als keine wählen und dann Nachricht,
die das Feedback sein wird, das der Benutzer über
unser Restaurant gibt, das hier in eine Zeichenfolge gemappt ist.
Dies sind also die verschiedenen Felder, die Teil unseres Formulars hier sein werden.
Also, sobald wir die Struktur des Formulars hier an Ort und Stelle haben,
so dass Sie feststellen, dass, wenn
diese Methode aufgerufen wird, wird dieses Formular die reaktive Form im Code hier erstellt werden.
Jetzt müssen wir dies in die Ansicht,
in die Vorlage dort abbilden.
Also, wir werden das im nächsten Schritt tun.
Also, jetzt, gehen wir zu unserer Vorlagendatei,
in der Kontaktkomponenten-Vorlagendatei,
werden wir nach unten scrollen und dann in
unsere Vorlagendatei direkt nach diesem div hier einfügen,
also haben wir dieses div in unserer Kontaktansicht, die die Standortinformationen enthält und so weiter.
Gleich danach werde ich ein anderes div erstellen, in
dem wir die reaktive Form dort hosten werden.
Lassen Sie mich ein paar Flex-Layout-Dinge
hier auf mein div anwenden.
Nun, diese Formulargröße, wie Sie sehen können, sollte
eine CSS-Klasse sein, die ich ein wenig später erstellen werde.
In diesem div werde ich mein Formular hosten.
Also, sobald ich dieses div in meine Vorlagendatei eingefügt habe,
lassen Sie mich jetzt mit einer Überschrift dafür beginnen.
Also sagen wir: „Senden Sie uns Ihr Feedback.“
Also, Sie suchen das Feedback von Besuchern auf Ihrer Website.
Wir beginnen mit der Konstruktion des Formulars.
Also, lassen Sie mich mit dem Formular-Tag
hier beginnen und dann werden wir das Formular in diesem Formular-Tag hier aufbauen.
Also, für das Formular, das erste, was ich tun werde, ist
das No Validate anzuwenden, weil die Validierung von eckig übernommen wird,
und dann auch eine Formulargruppe hier anwenden.
Beachten Sie also, dass diese Formulargruppe diejenige ist, die mich in das reaktive Formularmodell binden wird
, das ich hier in meinem Code erstellt habe.
So
binden wir diese reaktive Form in der Vorlage an
das entsprechende Formularmodell in unserer Typoskriptdatei dort.
Die Art und Weise, wie wir das tun, ist, dass wir die Formulargruppe und das Feedback-Formular deklarieren.
Ich zeige Ihnen, wie Sie
die restlichen Formularelemente
in kurzer Zeit an die entsprechenden Eigenschaften im Formularmodell binden.
Also, nachdem wir dies getan haben,
lassen Sie uns unsere Formularelemente in diesem Formularmodell platzieren.
Also, ich werde hier ein P deklarieren und dann innen dort
werde ich das Mat-Form-Feld hier verwenden,
auf das ich eine CSS-Klasse namens Half-Width anwenden
und dies abschließen werde.
Das würde also meine erste Formularsteuerung hier einführen.
Also, hier werde ich die Eingabe setzen und dann den MatInput aus eckigem Material hier anwenden.
Um dies in die Eigenschaft in meinem Formularmodell
zu binden, müsste ich FormControlName tun,
und der erste ist der Vorname.
Auf diese Weise ist diese Eingabe jetzt an die Vornamen-Eigenschaft gebunden
, die ich in meinem Formularmodell definiert habe, das ich im Code definiert habe.
Der Vorname, und dann werde ich
den Platzhalter als Vorname definieren.
Also, wie Sie erwarten würden,
wird dieses Eingabefeld verwendet werden, um den
Vornamen durch den Benutzer einzugeben, Text einzugeben.
Interessanterweise sehen Sie, dass wir nicht
mehr das ng-Modell hier oder eine der Template-Variablen und so weiter in meiner Form haben.
Reaktive Formulare funktionieren anders.
Wie Sie in reaktiven Formularen sehen,
ordnen Sie die Formulargruppe zu und versuchen Sie dann die Namen des Formularsteuerelements.
Wenn Sie Formularsteuerelemente mit der Formularsteuerklasse erstellen,
deklarieren Sie dies als Formularsteuerelement in eckigen Klammern und passen Sie
es dann mit dem entsprechenden Formularsteuerelement an, das Sie in Ihrem Typ skeptisch erstellen.
Aber jetzt, da wir den Formulargenerator verwenden,
muss ich nur die Formulargruppe wie
diese in meiner Form an das entsprechende Formularmodell binden,
und dann den Rest von ihnen
deklariere ich als Formularsteuerelement Namen und sie dann mit
den entsprechenden Eigenschaften im
Formularsteuermodell dass ich in meinem Typoskript den Codeweg habe.
Dies wird also das Vornamenfeld dort erstellen.
Lassen Sie mich das kopieren.
Ich brauche hier einen Nachnamen.
Also, ich werde dies kopieren und dann sagen, Formularsteuerelement Name ist Nachname,
und der Platzhalter ist Nachname,
und der Typ, Text, hier.
Ich hatte Vornamen,
ich hatte Nachnamen und wenn Sie sich das Formularsteuermodell ansehen,
werden Sie sehen, dass
ich nach dem Vor- und Nachnamen die Telefonnummer als nächste habe,
also werde ich das hier einfügen.
Dann ist der Name des Formularsteuerelements hier Telnum,
und der Platzhalter ist Telefonnummer,
und der Typ ist Tel.
Während wir dabei sind,
werde ich das Erforderliche in diese binden, obwohl das nicht wirklich erforderlich ist.
Aber lassen Sie mich das einfach hinzufügen.
Nun, Telefonnummer, dann habe ich E-Mail.
Also, das nächste Feld ist E-Mail,
und der Platzhalter ist E-Mail,
und der Typ ist auch.
Also, jetzt habe ich
Vorname, Nachname, Telefonnummer und E-Mail.
Das nächste, was ich hinzufügen werde, ist ein Schieberegler.
Früher verwenden wir das Kontrollkästchen.
Das slidetoggle ist ein weiteres Formular-Steuerelement, das eckiges Material bietet,
das etwas anders aussieht als das Kontrollkästchen und
ich dachte, dass ich mit Ihnen illustrieren werde, indem ich es in der Form hier verwende.
Nun, hier werde ich eine Tabelle verwenden, um diese Elemente zu positionieren.
Der Grund dafür ist, dass
diese Elemente ohne Verwendung einer Tabelle schwer zu positionieren sind.
Also, in der Tabelle,
ich bin sicher, dass Sie alle wissen, wie man Tabelle verwendet,
ich habe versucht, sie mit dem
Standard-Flex-Layout zu positionieren und war damit nicht sehr erfolgreich.
Stattdessen griff ich auf eine Tabelle zurück, um diese beiden Elemente in meiner Form zu positionieren.
Also, Mat-Schiebe-Toggle.
Also, das Slidetoggle ist wie das Kontrollkästchen,
Sie können es ein- und ausschalten,
und dies ist erlaubt, einen booleschen Wert hier auszuwählen.
Also, slidetoggle und der FormControlName ist einverstanden.
Wenn Sie sich erinnern, hatten wir zustimmen,
was eine boolesche Eigenschaft im Formular-Steuerelement war.
Dann, würde ich sagen,
können wir Sie kontaktieren?
Jetzt wird es Ihnen klarer, wenn Sie die endgültige Version
dieses Formulars sehen, um zu verstehen, warum wir dies tun.
Im Moment werden wir einfach alle Teile in meine reaktive Form geben.
Der zweite Teil werde ich eine Auswahl verwenden,
die durch die Matten-Select-Komponente in Winkelmaterial unterstützt wird.
Also, MD wählen und dafür den Platzhalter,
werde ich als definieren „Wie?“
und FormControlName, mit dem ich dies binden werde, ist
„contacttype“ und schließen Sie die MD-Auswahl.
Dies ermöglicht mir, ein select-Element in meinem Formular zu erstellen.
Also, das select-Element ist etwas, das mir
eine Pull-down-Liste gibt, aus der ich eine von ihnen auswählen kann.
Um die Pull-Down-Liste
zu erstellen, werde ich die mat-Option verwenden, die als Komponente in Winkelmaterial verfügbar ist.
Also, die mat-Option ist in der mat-select enthalten.
Also, für die Option,
werde ich *ngFor tun,
und ich bin sicher, dass Sie sich an die ngFo-Direktive von früher erinnern,
*ngFor „Lassen Sie ctype von ContactType.“
Jetzt sehen Sie, warum ich die Kontakttypvariable
früher in meinem Code deklariert habe und dann würde ich sagen, [value] = „ctype“.
Also, ich richte meine Option in meiner Auswahl hier ein und verwende Interpolation,
ich gebe hier ctype ein.
Also, das wird mir ein Pulldown-Optionsmenü in meiner Form geben.
Also, das ist der nächste Teil und dann,
nach dem Tisch, werde ich hier einen Textbereich einfügen.
Also würde ich p sagen und das P schließen, um die reaktive Form zu stylen,
erlaubt mir das P-Element, die Elemente richtig zu positionieren.
Deshalb benutze ich das.
Also, wie Sie sich erinnern,
erlaubt mat-form-field mir,
hier einen Eingabecontainer einzuschließen, und dann werde ich einen Textbereich definieren, auf den
ich
die MatInput-Direktive darauf anwende.
Dann, die FormControlName, werde ich als „Nachricht“ geben.
Dieses spezielle Formularelement ermöglicht es dem Benutzer,
die Feedback-Nachricht für mein Restaurant einzugeben.
Also, Platzhalter „Ihr Feedback“,
und dann werde ich dem Textbereich eine Größe von
12 Zeilen hier geben und dann den Textbereich schließen.
Also, hier haben wir einen Textbereich mit den 12 Zeilen.
Also, das vervollständigt den größten Teil des Formulars.
Entschuldigung, das sollte außerhalb des Tisches sein.
Wir brauchen einen Button, um das Formular zu senden.
Also, genau dort werde ich eine Schaltfläche des Typs „submit“ einschließen und
diese Schaltfläche einreichen werde ich
den mat-Button anwenden und auch die class = = „background-primary“ anwenden.
Sie haben gesehen, wie ich dies auf die Schaltfläche in der vorherigen Übung auch,
ähnliche Art von Schaltfläche.
Also, jetzt ist meine Form fast fertig.
Sie könnten der Kontaktkomponente ein paar CSS-Klassen hinzufügen.
Die drei Klassen, die ich verwendet habe, sind volle Breite,
dies wird verwendet, um die Größe der Elemente dort festzulegen.
Also, volle Breite 95 Prozent, halbe Breite.
Dies erlaubt mir, die Elemente korrekt zu dimensionieren,
45 Prozent halber Breite und dann Formgröße.
Also verwende ich diese CSS-Klassen in meiner Form.
Lassen Sie uns also die Änderungen speichern
und werfen Sie einen kurzen Blick auf das Formular in unserer Anwendung. Wenn Sie
in der Kontaktansicht zum Browser gehen,
sehen Sie jetzt das Formular an Ort und Stelle in der Kontaktansicht hier.
So sehen Sie die senden Sie uns Ihr Feedback,
den Vornamen, den Nachnamen, die Telefonnummer, die
E-Mail und den Schieberegler hier,
so dass Sie den Schieberegler an Ort und Stelle sehen und dann ist dies diese Auswahl.
Die Auswahl ermöglicht es mir, eine dieser drei auszuwählen.
Der Standardwert ist none und dann der Textbereich hier,
ermöglicht es mir, hier meine Feedbackkommentare einzugeben und dann den Submit-Button.
Damit wird das reaktive Formular in
meiner Anwendung ausgefüllt, aber wenn Sie auf die Schaltfläche Absenden klicken,
können Sie dieses Formular nicht absenden.
Also müssen wir das ngSubmit unserem Formular in der Vorlage
hinzufügen und dann eine Methode in unserer Type-Skriptdatei hinzufügen. Wenn ich
zu unserem Code gehe,
zum Formular hier,
zusammen mit dem Formular novalidate FormGroup,
werde ich ein ngSubmit dem Formular hinzufügen.
Ich rufe die Methode als onSubmit-Methode auf.
Damit ist mein Formular nun bereit, Informationen einzureichen.
Ich muss in die Kontaktkomponenten gehen,
Skriptdatei eingeben und dann die onSubmit-Methode hier erstellen.
In der onSubmit-Methode
kommt es also vor, dass das Formularmodell genau das gleiche wie die Datenmodelle ist,
so dass ich einfach den Wert des Formularmodells übernehmen kann.
Wenn Sie also ein Formularmodell wie dieses Feedback-Formular haben,
gibt das Feedback-Formular eine Eigenschaft namens value
an, mit der ich den aktuellen Wert all dieser aus meinem Feedback-Formular abrufen kann.
Dies wird also ein JavaScript-Objekt bilden,
das ich dann in das Feedback-JavaScript-Objekt abbilden kann.
Es kommt vor, dass beide genau die gleiche Struktur haben,
das Datenmodell und das Formularmodell.
Deshalb kann ich den Wert schnell
direkt in das Datenmodell laden, wenn der Benutzer das Formular absendet.
Wenn sich Ihr Datenmodell etwas vom Formularmodell unterscheidet,
müssen Sie einzelne Eigenschaften explizit zuordnen
, was innerhalb dieser Methode möglich ist.
Nur um Ihnen zu zeigen, dass das Formular korrekt gesendet wurde,
werde ich den Wert an die Konsole, die JavaScript-Konsole, protokollieren.
Dann würde ich sagen, this.feedbackForm.Reset. Mit
der Reset-Methode können Sie das Formular in seinen normalen Zustand zurücksetzen und
alle Einträge entfernen, die Sie im Formular ausgeführt haben.
Sobald der Benutzer sendet,
würden Sie normalerweise die Werte erfassen und dann das Formular zurücksetzen
, so dass weitere Eingaben als separates Formular erfolgen können.
Das ist also die Reset-Methode, die wir hier verwenden werden.
Also
lassen Sie uns mit diesen Änderungen die Änderungen speichern und dann gehen und sehen Sie unser Formular in Aktion.
Eine letzte kleine Sache, die ich meiner Vorlage hinzufügen möchte, besteht
darin, Ihnen die Formularwerte in meinem Formular selbst zu zeigen,
obwohl
Sie dies in einer echten Anwendung nicht tun würden, aber ich wollte Ihnen nur zeigen, wie
Sie die FeedbackForm-Werte direkt hier sehen können,
aus dem FeedbackForm-Modell.
Also, ich kann es hier drinnen tun.
Ich kann FeedbackForm.Value sagen und durch json geleitet, um hier zu zeigen.
Ebenso kann ich hier tun, FeedbackForm.
Es gibt eine andere Eigenschaft mit diesem Formularmodell namens status,
die mir den Status des Formulars in diesem Moment anzeigt,
unabhängig davon, ob es gültig oder ungültig ist.
Also, ich werde diese beiden in mein Formular hier hinzufügen,
so dass dies in meiner Vorlage angezeigt wird.
Dies ist nur, um Ihnen einen sofortigen Überblick darüber zu geben, was
das Formularmodell in meiner Type-Skriptdatei enthält.
Lassen Sie uns die Änderungen speichern und gehen und werfen Sie einen kurzen Blick auf unser Formular.
Wenn Sie zu unserem Browser zurückkehren,
können Sie jetzt sehen, dass die Formularwerte
hier angezeigt werden und das Formular in guter Form ist, damit wir die Werte eingeben können.
Also lassen Sie uns hier einige Zufallswerte eingeben und Sie können
sofort sehen, dass der Wert im FeedbackForm-Modell dort reflektiert wird,
direkt an der Spitze und E-Mail.
Es spielt keine Rolle, tippen Sie einfach etwas ein.
Dann, dieser Schalter,
können Sie sehen, dass, wenn Sie es ein- und ausschalten,
die zustimmen wiederum ändert sich von false zu true.
Also lassen Sie mich es wahr lassen und dann die Auswahl.
Lassen Sie mich E-Mail auswählen und dann sehen Sie, dass der Kontakttyp hier in E-Mail geändert hat.
So würden Sie wählen, um den Wert zu ändern.
Also, sagen wir E-Mail und dann hier
können wir die Nachricht eingeben.
Einige zufällige Text hier und Sie würden
in der Lage zu sehen, dass der zufällige Text in der Nachricht dort reflektiert wird.
Lassen Sie uns das Formular absenden.
Wenn Sie also auf das Senden klicken, sehen Sie sofort in der Konsole,
der Wert hier ausgedruckt wird,
in diesem Objekt hier.
So können Sie durchsuchen, um alle Eigenschaften für dieses Objekt,
das Feedback-Formularmodell, anzuzeigen.
Dies ist also eine Illustration einer reaktiven Form innerhalb unserer Anwendung.
Damit ist diese Übung abgeschlossen.
In dieser Übung haben wir gesehen, wie wir
innerhalb unserer Angular-Anwendung eine reaktive Form erstellen können.
Dies ist auch ein guter Punkt, an dem Sie ein Git-Commit mit der Nachricht durchführen können,
reaktive bildet Teil eins.