Création de contrôles de formulaire personnalisés avec ElementInternals

Les développeurs ont depuis longtemps hâte d'avoir plus de contrôle sur les éléments de forme. Bien que cela soit un peu exagéré, la création ou la personnalisation des composants de forme a été le Saint Graal du développement Web frontal depuis des années.

Éléments personnalisés (par exemple<my-custom-element></my-custom-element> ) L'une des fonctionnalités les plus puissantes, a été discrètement publiée depuis la version Google Chrome 77 et a été progressivement appliquée à d'autres navigateurs. La norme ElementInternals est un ensemble puissant de fonctionnalités avec un nom très discret. Ses fonctionnalités incluent les formulaires participants et les API entourant les contrôles d'accessibilité.

Cet article explorera comment créer des contrôles de formulaires personnalisés, intégrer la vérification des contraintes, introduire les bases de l'accessibilité interne et montrer comment combiner ces fonctionnalités pour créer des contrôles de formulaire macro hautement portables.

Commençons par créer un élément personnalisé simple qui correspond à notre système de conception. Nos éléments économiseront tous les styles dans Shadow Dom et assureront une accessibilité de base. Nous utiliserons l'excellente bibliothèque Littelement de l'équipe Google Polymer comme exemple de code, et bien que vous n'en avez absolument pas besoin, il fournit une bonne abstraction pour écrire des éléments personnalisés.

Dans cet exemple, nous créons un<rad-input></rad-input> , il a quelques conceptions de base. Nous avons également ajouté une deuxième entrée au formulaire, qui est une entrée HTML normale, et ajouté la valeur par défaut (afin que vous puissiez simplement appuyer sur Soumettre et voir comment cela fonctionne).

Lorsque nous cliquons sur le bouton Soumettre, plusieurs choses se produisent. Premièrement, la méthode preventDefault de l'événement de validation est appelée, dans ce cas, pour s'assurer que notre page ne recharge pas. Après cela, nous créons un objet FormData qui nous permet d'accéder à des informations sur le formulaire, que nous utilisons pour construire une chaîne JSON et l'ajout<output></output> élément. Cependant, notez que la valeur unique ajoutée à notre sortie provient d'un élément nommé "Basic".

En effet<rad-input></rad-input> , pour l'aider à mériter son nom. Tout d'abord, nous devons appeler la méthode attachInternals de notre méthode dans le constructeur de l'élément, et nous importerons également le polyfill élémentInternals dans notre page pour une utilisation avec des navigateurs qui ne prennent pas encore en charge la spécification.

La méthode attachInternals renvoie une nouvelle instance interne d'élément contenant de nouvelles API que nous pouvons utiliser dans nos méthodes. Pour que nos éléments profitent de ces API, nous devons ajouter un Getter formAssociated statique qui renvoie true .

 classe Radinput étend Litetelement {
  STATIQUE GET FORMASSOCIED () {
    Retour Vrai;
  }

  constructeur () {
    super();
    this.internals = this.attachinternals ();
  }
}

Jetons un coup d'œil à certaines API dans internals d'un élément:

• setFormValue(value: string|FormData|File, state?: any): void - cette méthode définit la valeur d'un élément sur sa forme parent si le formulaire parent existe. Si la valeur est nul, l'élément ne participera pas au processus de soumission de formulaire.
• form - Si présente, il s'agit d'une référence à la forme parent de l'élément.
• setValidity(flags: Partial<validitystate> , message?: string, anchor?: HTMLElement): void</validitystate> - la méthode setValidity aidera à contrôler l'état de validité des éléments sous la forme. Si le formulaire n'est pas valide, un message de vérification doit exister.
• willValidate - Vrai si l'élément est évalué lorsque le formulaire est soumis.
• validity - Un objet de validité qui correspond à l'API et à la sémantique attachés à HTMLInputElement.prototype.validity .
• validationMessage - Si vous setValidity pour invalider le contrôle, il s'agit du message décrivant l'erreur.
• checkValidity - Renvoie True si l'élément est valide, sinon renvoie False et déclenche un événement non valide sur l'élément.
• reportValidity - Identique à checkValidity , si l'événement n'est pas annulé, un problème est signalé à l'utilisateur.
• labels - Utilisez label[for] pour marquer la liste des éléments pour cet élément.
• Quelques autres contrôles pour définir des informations ARIA sur les éléments.

Définissez la valeur d'un élément personnalisé

Modifions le nôtre<rad-input></rad-input> Pour profiter de certaines de ces API:

Ici, nous modifions la méthode _onInput de l'élément pour contenir un appel à this.internals.setFormValue . Cela indique au formulaire que notre élément souhaite enregistrer une valeur dans le formulaire en utilisant son nom donné (défini comme une propriété dans notre HTML). Nous avons également ajouté une méthode firstUpdated (similaire à connectedCallback lors de l'utilisation de Linetelement) qui définit la valeur de l'élément sur une chaîne vide lorsque l'élément est terminé le rendu. Il s'agit de garantir que nos éléments ont toujours la valeur du formulaire (bien que non requis, vous pouvez exclure les éléments du formulaire en passant une valeur nulle).

Maintenant, lorsque nous ajoutons de la valeur à l'entrée et soumettons le formulaire, nous serons dans notre<output></output> Une valeur radInput est observée dans l'élément. Nous pouvons également voir que notre élément a été ajouté à la propriété radInput de HTMLFormElement . Cependant, une chose que vous avez peut-être remarquée, c'est qu'elle permet toujours la soumission de formulaire malgré le fait que notre élément n'ait aucune valeur. Ensuite, ajoutons une certaine validation à notre élément.

Ajouter une vérification des contraintes

Pour définir la validation du champ, nous devons modifier un peu l'élément pour utiliser la méthode setValidity sur l'objet à l'intérieur de l'élément. Cette méthode acceptera trois paramètres (si l'élément n'est pas valide, seul le deuxième paramètre est requis et le troisième paramètre est toujours facultatif). Le premier paramètre fait partie de ValidityState . Si un drapeau est défini sur true, le contrôle sera marqué comme non valide. Si l'une des clés de validité intégrée ne répond pas à vos besoins, vous pouvez utiliser la touche customError commune. Enfin, si le contrôle est valide, nous passerons dans un objet littéral ({}) pour réinitialiser la validité du contrôle.

Le deuxième paramètre est le message de validité du contrôle. Ce paramètre est requis si le contrôle n'est pas valide, et ce paramètre n'est pas autorisé si le contrôle est valide. Le troisième paramètre est une cible de vérification facultative, qui contrôlera la mise au point de l'utilisateur si la soumission du formulaire n'est pas valide ou si reportValidity est appelé.

Nous donnerons notre<rad-input></rad-input> Introduire une nouvelle méthode pour gérer cette logique:

 _ManageRequired () {
  const {value} = this;
  const input = this.shadowroot.QuerySelector («entrée»);
  if (value === '' && this.required) {
    this.internals.setvalidité ({
      valorisation: vrai
    }, «Ce champ est requis», entrée);
  } autre {
    this.internals.setValidité ({});
  }
}

Cette fonction obtient la valeur et l'entrée du contrôle. Si la valeur est égale à une chaîne vide et que l'élément est marqué selon les besoins, nous appellerons internals.setValidity et basculerons la validité du contrôle. Maintenant, tout ce que nous devons faire est d'appeler cette méthode dans nos méthodes firstUpdated et _onInput , et nous pouvons ajouter une validation de base à nos éléments.

En l'absence de notre<rad-input></rad-input> Avant d'entrer dans la valeur, cliquez sur le bouton Soumettre et le message d'erreur sera désormais affiché dans les navigateurs qui prennent en charge la spécification ElementInternals. Malheureusement, PolyFill ne prend toujours pas en charge l'affichage des erreurs de vérification , car il n'y a pas de moyen fiable de déclencher la fenêtre contextuelle intégrée dans les navigateurs non pris en charge.

Nous avons également ajouté quelques informations d'accessibilité de base à notre exemple en utilisant notre objet internals . Nous ajoutons une propriété supplémentaire _required à l'élément, qui agira comme un proxy pour this.required Require et un getter / setter pour required .

 get requis () {
  renvoie ce._requeed;
}

SET requis (isRequired) {
  this._required = isRequired;
  this.internals.ariaRequired = isRequired;
}

En transmettant la propriété required aux internals.ariaRequired , nous rappelons au lecteur d'écran que notre élément a actuellement besoin d'une valeur. Dans Polyfill, cela se fait en ajoutant l'attribut aria-required ; Cependant, dans les navigateurs pris en charge, l'attribut n'est pas ajouté à l'élément car l'attribut est inhérent à l'élément.

Créer une micro-forme

Maintenant que nous avons une entrée valide qui correspond à notre système de conception, nous voulons peut-être commencer à combiner nos éléments en modèles qui peuvent être réutilisés sur plusieurs applications. L'une des fonctionnalités les plus accrocheuses de ElementInternals est que la méthode setFormValue peut prendre non seulement des données de chaîne et de fichier, mais également des objets FormData. Donc, supposons que nous voulons créer une forme d'adresse commune qui pourrait être utilisée dans plusieurs organisations, nous pouvons le faire facilement avec nos éléments nouvellement créés.

Dans cet exemple, nous créons une forme dans la racine de l'ombre de l'élément, dans lequel nous combinons quatre<rad-input></rad-input> Élément pour créer un formulaire d'adresse. Au lieu d'appeler setFormValue avec une chaîne cette fois, nous choisissons de passer la valeur entière du formulaire. En conséquence, notre élément transmet la valeur de chaque élément individuel dans sa forme enfant à la forme externe.

L'ajout de validation de contraintes à ce formulaire serait un processus assez simple, tout comme la fourniture de places de style, de comportement et de contenu supplémentaires. L'utilisation de ces nouvelles API permet finalement aux développeurs de débloquer beaucoup de potentiel dans les éléments personnalisés et nous donne finalement la liberté de contrôler l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!