formData
La méthode formData sert à générer un objet de données lié aux éléments de formulaire, rendant ainsi le traitement des éléments de formulaire plus simple et plus efficace. Cette méthode produit un objet contenant les valeurs de tous les éléments de formulaire présents dans l’élément cible, et cet objet reflète en temps réel les modifications des éléments de formulaire.
Dans l’exemple ci-dessous, nous montrons comment utiliser la méthode formData pour générer des données d’objet liées à un élément de formulaire :
Dans cet exemple, nous avons créé un formulaire contenant une zone de saisie de texte, des boutons radio et une zone de texte, et utilisé la méthode formData pour créer un objet data qui contient les valeurs de ces éléments de formulaire. Nous avons également utilisé la méthode watch pour surveiller les changements de données et afficher les données en temps réel sur la page. Lorsque l'utilisateur modifie la valeur d'un élément de formulaire, l'objet data est mis à jour en conséquence, rendant le traitement des données très simple et efficace.
Liaison de données inverse
Les données d’objet générées possèdent également une capacité de liaison inverse, ce qui signifie que lorsque vous modifiez les propriétés de l’objet, les valeurs des éléments de formulaire associées se mettent à jour automatiquement. Cela est très utile lors du traitement des données de formulaire, car vous pouvez facilement mettre en œuvre une liaison de données bidirectionnelle.
Dans l'exemple ci-dessous, nous démontrons comment utiliser les données d'objet générées par la méthode formData, ainsi que la manière d'effectuer une liaison de données inverse :
Dans cet exemple, nous avons d'abord créé un formulaire contenant une zone de saisie de texte, des boutons radio et une zone de texte, puis nous avons utilisé la méthode formData pour générer un objet de données data. Ensuite, en modifiant les propriétés de l'objet data, nous avons réalisé une liaison de données bidirectionnelle, c'est-à-dire que les valeurs des éléments du formulaire sont automatiquement mises à jour lorsque les propriétés de l'objet sont modifiées. Cette fonctionnalité de liaison de données bidirectionnelle rend l'interaction avec les données du formulaire plus pratique.
Écouter un formulaire spécifique
Par défaut, la méthode formData() écoute tous les éléments input, select et textarea dans l'élément cible. Mais si vous ne souhaitez écouter que des éléments de formulaire spécifiques, vous pouvez le faire en transmettant un sélecteur CSS.
Dans l’exemple ci-dessous, nous montrons comment écouter un élément de formulaire spécifique en passant un sélecteur CSS :
Dans cet exemple, nous souhaitons écouter uniquement les éléments de formulaire dont la class est "use-it", c'est pourquoi nous avons passé ".use-it" comme paramètre à la méthode formData(). Ainsi, seuls les éléments de formulaire portant ce nom de classe seront écoutés et inclus dans l'objet de données généré. Cela est très utile pour écouter de manière sélective les éléments de formulaire, afin de gérer vos données de formulaire plus précisément.
Formulaire personnalisé
L'utilisation d'un composant de formulaire personnalisé est très simple : il suffit d'ajouter un attribut value au composant personnalisé et de définir une propriété name.
Lorsque vous utilisez un composant de formulaire personnalisé, vous n'avez qu'à l'ajouter à votre formulaire et définir l'attribut name requis. Dans l'exemple ci-dessus, nous utilisons l'élément <custom-input> et définissons l'attribut name pour utiliser le composant de formulaire personnalisé. Ensuite, nous utilisons la méthode formData() pour écouter les valeurs des éléments d'entrée et des composants personnalisés, afin d'obtenir et de traiter les données du formulaire en temps réel. Cette méthode vous permet d'étendre facilement votre formulaire pour inclure des composants de formulaire personnalisés, répondant ainsi à vos besoins spécifiques.
Utiliser des données de formulaire dans un composant ou une page
Parfois, vous pouvez avoir besoin d'utiliser des données de formulaire dans un composant ou une page, et il est nécessaire de générer des données au moment du cycle de vie attached et de les lier au composant.
{{logtext}}
Grâce au cycle de vie attached, une fois le composant prêt, nous avons généré l’objet de données de formulaire fdata à l’aide de la méthode this.shadow.formData().
formData() est plus adapté aux scénarios de formulaires où la logique d'interaction est relativement simple.