formData
Die formData-Methode wird verwendet, um ein mit Formularelementen gebundenes Objekt zu erzeugen, wodurch die Verarbeitung von Formularelementen einfacher und effizienter wird. Diese Methode erzeugt ein Objekt, das alle Werte der Formularelemente innerhalb des Zielelements enthält, und dieses Objekt spiegelt in Echtzeit Änderungen an den Formularelementen wider.
Im folgenden Beispiel zeigen wir, wie man mit der formData-Methode ein an Formularelemente gebundenes Objekt erzeugt:
In diesem Beispiel haben wir ein Formular mit einem Textfeld, Radio-Buttons und einem Textbereich erstellt und die Methode formData verwendet, um ein Objekt data zu erstellen, das die Werte dieser Formularelemente enthält. Wir haben auch die Methode watch verwendet, um Änderungen der Daten zu überwachen und die Daten in Echtzeit auf der Seite anzuzeigen. Wenn der Benutzer die Werte der Formularelemente ändert, wird das Objekt data entsprechend aktualisiert, was die Datenverarbeitung sehr einfach und effizient macht.
Zwei-Wege-Datenbindung
Die generierten Objektdaten haben ebenfalls die Fähigkeit zur umgekehrten Bindung, was bedeutet, dass sich die Werte der zugehörigen Formularelemente automatisch aktualisieren, wenn Sie die Eigenschaften des Objekts ändern. Dies ist sehr nützlich bei der Verarbeitung von Formulardaten, da Sie so problemlos eine bidirektionale Datenbindung implementieren können.
Im folgenden Beispiel demonstrieren wir, wie die mit der formData-Methode generierten Objektdaten verwendet werden, sowie wie eine Reverse-Datenbindung durchgeführt wird:
In diesem Beispiel erstellen wir zunächst ein Formular mit Texteingabefeld, Optionsfeld und Textbereich und verwenden dann die Methode formData, um ein Datenobjekt data zu erzeugen. Anschließend realisieren wir durch Ändern der Eigenschaften des data-Objekts eine umgekehrte Datenbindung: Die Werte der Formularelemente aktualisieren sich automatisch, sobald sich die Objekteigenschaften ändern. Diese bidirektionale Datenbindung erleichtert die Interaktion mit Formulardaten erheblich.
Bestimmte Formulare überwachen
Standardmäßig überwacht die Methode formData() alle input-, select- und textarea-Elemente innerhalb des Ziel-Elements. Wenn du jedoch nur bestimmte Formularelemente überwachen möchtest, kannst du einen CSS-Selektor übergeben.
In dem folgenden Beispiel demonstrieren wir, wie man durch die Übergabe von CSS-Selektoren bestimmte Formularelemente überwachen kann:
在此示例中，我们只希望监听具有 class 为 "use-it" 的表单元素，因此我们传递了 ".use-it" 作为参数给 formData() 方法。这样，只有带有该类名的表单元素会被监听和包括在生成的数据对象中。这对于选择性地监听表单元素非常有用，以便更精确地管理你的表单数据。
Benutzerdefiniertes Formular
Die Verwendung benutzerdefinierter Formularkomponenten ist sehr einfach: Sie müssen lediglich eine value-Eigenschaft hinzufügen und das name-Attribut setzen.
Wenn du eine benutzerdefinierte Formularkomponente verwendest, musst du sie einfach deinem Formular hinzufügen und das erforderliche name-Attribut setzen. Im obigen Beispiel verwenden wir die benutzerdefinierte Formularkomponente, indem wir das <custom-input>-Element hinzufügen und das name-Attribut setzen. Danach lauschen wir mit der Methode formData() auf die Werte der Eingabeelemente und der benutzerdefinierten Komponente, um Formulardaten in Echtzeit zu erfassen und zu verarbeiten. Diese Methode ermöglicht es dir, dein Formular ganz bequem um benutzerdefinierte Formularkomponenten zu erweitern, um deine spezifischen Anforderungen zu erfüllen.
Formulardaten in Komponenten oder Seiten verwenden
Manchmal müssen Sie möglicherweise Formulardaten innerhalb einer Komponente oder Seite verwenden und die Daten im attached-Lebenszyklus erzeugen und an die Komponente binden.
{{logtext}}
Über den Lebenszyklus attached generieren wir nach dem Bereitstellen der Komponente mit der Methode this.shadow.formData() ein Formulardaten-Objekt fdata.
formData() eignet sich besser für Formularszenarien mit relativ einfacher Interaktionslogik.