15 octobre 2024
inputemail inputpassword dans un EditForm

Blazor – InputEmail & InputPassword

Peut-être que comme moi, vous êtes demandé pourquoi ils n’avaient pas ajouté InputEmail et InputPassword dans les composants de formulaire pour nos applications Blazor …. Car l’utilisation de ces composants apporte une expérience utilisateur formidable et un simplicité de mise en place pour nous.

Input componentRendered as…
InputCheckbox<input type= »checkbox »>
InputDate<TValue><input type= »date »>
InputFile<input type= »file »>
InputNumber<TValue><input type= »number »>
InputRadio<TValue><input type= »radio »>
InputRadioGroup<TValue>Group of child InputRadio<TValue>
InputSelect<TValue><select>
InputText<input>
InputTextArea<textarea>
Source : https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-7.0#built-in-input-components

Mais c’est pas comme si InputPassword et InputEmail n’était jamais utilisé… A ça près! Et ainsi on avait tous les champs de formulaire possible. Et bien je n’ai pas honte de le dire mais jusqu’à présent je m’en suis donc passé et utilisé la balise html classique dans mes formulaires

Le mystère du « pourquoi je n’y ai jamais pensé » !?

Un bug dans la matrice. Je ne vois que ça.

Après la seule excuse que je me suis trouvé et que dans la documentation on ne parle jamais de ça.

Vous me croyerez peut être pas mais j’ai dû demander à Steve Sanderson… : « use the ‘type’ attribute : <InputText type= »password » /> » et je suis tombé.

Comparaison des champs

Bon je vais en profiter pour vous montrer une petite astuce pour vérifier la frappe des mots de passe ou emails dans un formulaire

La plupart du temps on place 2 champs emails avec l’attribut autocomplete= »off » et dans le code C# on compare les valeurs.

💡ASTUCES

Si vous souhaitez que votre utilisateur ne puisse faire de couper/copier/coller de donnée dans les champs d’un formulaire : ajouter les attributs onpaste= »return false; » onCopy= »return false » onCut= »return false »
Vous pouvez aller encore plus loin avec : onDrag= »return false » onDrop= »return false »

Data annotation pour simplifier notre vie

Le plus simple et d’utiliser l’attribut [Compare] et de laisser faire la magie du formulaire !

C#

Laisser un commentaire