Bases de Blazor : validation avancée du formulaire Blazor

Découvrez comment obtenir un contrôle plus granulaire sur la façon dont les formulaires Blazor sont générés en créant et en utilisant manuellement EditContext.

Dans un article précédent dans la série Blazor Basics, nous avons appris à créer des formulaires HTML et à capturer les données utilisateur. Nous avons également appris à implémenter la validation de base des données de formulaire avec Blazor à l’aide des annotations de données .NET.

Dans cet article, nous explorerons des techniques de validation de formulaire plus avancées.

Tu peux accéder au code utilisé dans cet exemple sur GitHubou recréez-le en suivant les extraits de code tout au long de cet article.

Le formulaire utilisateur

Nous utilisons le même formulaire utilisateur que celui utilisé précédemment dans cette série Blazor Basic. Il contient un nom d’utilisateur, un mot de passe et un champ de confirmation du mot de passe.

Plus de contrôle avec EditContext

Nous avons découvert le système intégré EditForm composant que nous pouvons utiliser pour créer des formulaires et gérer la soumission et la validation des formulaires. En coulisses, le EditForm Le composant initialise et utilise un EditContext. Le contexte contient des informations partagées avec les champs de saisie.

L’intégré InputText (et types similaires) accèdent à des informations contextuelles, telles que l’objet de données fourni au EditForm Composants Model propriété.

En utilisant le EditForm composant, nous obtenons une structure de composant simple et de nombreux comportements par défaut intégrés. Cependant, lorsque nous souhaitons obtenir un contrôle plus granulaire sur le formulaire, nous pouvons créer manuellement le EditContext et le fournir au EditForm composant.

Jetons un coup d’œil à l’exemple suivant :

<EditForm EditContext="@EditContext" OnValidSubmit="@Submit">
    @* Input fields omitted *@
</EditForm>

@code {
    public User? UserModel { get; set; }
    public EditContext EditContext { get; set; }

    protected override void OnInitialized()
    {
        UserModel = new User();
        EditContext = new EditContext(UserModel);
    }
}

Semblable à l’utilisation du EditForm composant et fournissant un objet à son Model propriété, nous pouvons à la place fournir un objet à sa EditContext propriété.

Nous créons le EditContext au sein de OnInitialized méthode du cycle de vie et fournir la UserModel comme seul argument constructeur.

Jusqu’à présent, le formulaire se comporte de la même manière que si nous fournissions directement le Model propriété. Cependant, nous avons maintenant une référence au EditContext objet.

Nous pouvons désormais activer la validation du formulaire en utilisant annotations de données en utilisant le EditContext propriété au lieu de fournir un composant enfant :

EditContext.EnableDataAnnotationsValidation();

Ou nous pouvons toujours utiliser le DataAnnotationsValidator composant en tant que composant enfant du EditForm composant.

Implémentation de la validation personnalisée

Nous souhaitons maintenant implémenter une validation personnalisée pour le champ de confirmation du mot de passe.

Actuellement, lorsqu’un utilisateur saisit des valeurs dans le mot de passe et dans le champ de confirmation du mot de passe, la validation basée sur les annotations de données sera déclenchée.

Jetez un oeil à User classe attribuée au annotations de données.

public class User
{
    [Required]
    [SupportedUsername]
    [StringLength(16, MinimumLength = 4, ErrorMessage = "The username must be between 4 and 16 characters.")]
    public string? Username { get; set; }

    [Required]
    [StringLength(24, MinimumLength = 10, ErrorMessage = "The password must be between 10 and 24 characters.")]
    public string? Password { get; set; }

    [Required]
    [StringLength(24, MinimumLength = 10, ErrorMessage = "The password must be between 10 and 24 characters.")]
    public string? PasswordConfirmation { get; set; }
}

De plus, pour valider la longueur du mot de passe, nous voulons nous assurer que le mot de passe est identique à la valeur saisie dans le champ de confirmation du mot de passe.

Nous ajoutons une instance du ValidationMessageStore tapez dans le composant de formulaire. Il contiendra les messages de validation pour les afficher à l’écran.

@code {
    public User? UserModel { get; set; }
    public EditContext? EditContext { get; set; }
    public ValidationMessageStore? MessageStore;

    protected override void OnInitialized()
    {
        UserModel = new User();

        EditContext = new EditContext(UserModel);
        MessageStore = new ValidationMessageStore(EditContext);

        EditContext.OnValidationRequested += HandleValidationRequested;
    }
}

Comme toute autre forme Blazor, nous initialisons d’abord une instance de la classe modèle. Ensuite, nous créons le EditContext objet et fournissez le modèle de données comme classe.

Nous créons maintenant une instance du ValidationMessageStore tapez et fournissez le EditContext comme argument.

Nous pouvons maintenant ajouter une méthode de validation au OnValidationRequested propriété événementielle du EditContext variable. Nous ajoutons le HandleValidationRequested méthode que nous mettrons en œuvre ensuite.

Comme indiqué ci-dessus, nous souhaitons ajouter une règle personnalisée, accédant aux deux champs de mot de passe et comparant leurs valeurs pour voir si elles sont égales.

private void HandleValidationRequested(object? sender, ValidationRequestedEventArgs args)
{
    MessageStore?.Clear();

    if (UserModel?.PasswordConfirmation != UserModel?.Password)
    {
        MessageStore?.Add(() => UserModel.PasswordConfirmation, "Passwords do not match.");
        EditContext?.NotifyValidationStateChanged();
    }
}

Tout d’abord, nous effaçons les messages de validation dans le MessageStore. Il garantit que chaque fois que la validation est déclenchée, les anciens messages de validation sont supprimés du MessageStore avant que la validation soit exécutée.

Ensuite, nous ajoutons le règle de validation personnalisée comme un if déclaration. Nous accédons au PasswordConfirmation et Password propriétés sur le UserModel propriété. Il contient les valeurs saisies dans le champ du formulaire.

Si la valeur du champ de confirmation du mot de passe n’est pas égale à la valeur du champ du mot de passe, nous ajoutons un message au MessageStore. Le premier paramètre fait référence au champ sur le UserModel objet. Le deuxième paramètre contient le message qui sera affiché à l’utilisateur.

Nous devons également appeler le NotifyValidationStateChanged méthode sur le EditContext pour lui faire savoir qu’il y a de nouveaux messages de validation.

Lorsque nous démarrons l’application et saisissons différentes valeurs dans les champs de mot de passe et de confirmation du mot de passe, nous voyons le texte « Les mots de passe ne correspondent pas » au-dessus du formulaire.

Il est rendu par le ValidationSummary composant que nous utilisons toujours comme composant enfant du EditForm composant.

Validation sur champ modifié

Actuellement, la méthode de validation personnalisée est appelée lorsque l’utilisateur soumet le formulaire. Si tu veux valider chaque fois qu’un champ est modifiévous pouvez utiliser le OnFieldChanged événement au lieu du OnValidationRequested événement sur le EditContext exemple.

Sachez que lorsque vous utilisez le OnFieldChanged événement, vous devez également vous assurer de valider le champ de confirmation du mot de passe uniquement lorsque le champ contient une valeur. Sinon, le message de validation s’affichera dès que l’utilisateur saisira une valeur dans le champ du mot de passe normal.

Vous pouvez utiliser le code suivant :

private void HandleFieldChanged(object? sender, FieldChangedEventArgs args)
{
    MessageStore?.Clear();

    if (UserModel?.PasswordConfirmation != UserModel?.Password && 
        UserModel?.PasswordConfirmation?.Length > 0)
    {
        MessageStore?.Add(() => UserModel.PasswordConfirmation, "Passwords do not match.");
        EditContext?.NotifyValidationStateChanged();
    }
}

Notez la partie supplémentaire dans le if instruction qui vérifie si la longueur du PasswordConfirmation la propriété est supérieure à 0.

Comme indiqué ci-dessus, vous pouvez enregistrer le HandleFieldChanged méthode à la EditContext en ajoutant la ligne suivante dans le OnInitialized méthode:

EditContext.OnFieldChanged += HandleFieldChanged;

Utiliser du CSS personnalisé

Le comportement par défaut des champs de saisie générés à l’aide des composants Input* intégrés fournit un indicateur d’erreur utilisant une bordure rouge.

Si nous voulons changer le style de nos champs de saisie, nous pouvons utiliser le FieldCssClassProvider comme classe de base pour notre implémentation.

Considérant le code suivant :

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
        return isValid ? "valid-field" : "invalid-field";
    }
}

Nous créons un nouveau CustomFieldClassProvider classe héritant de la classe intégrée FieldCssClassProvider classe. Nous remplaçons le GetFieldCssClass méthode pour implémenter du code personnalisé.

Dans cet exemple, nous vérifions le EditContext pour les messages de validation existants. Nous utilisons ensuite le résultat pour décider s’il faut ajouter le champ valide ou la champ invalide Classe CSS au composant d’entrée.

Ensuite, nous définissons les classes CSS dans le site.css fichier dans le wwwroot/css dossier du projet.

.valid-field {
    border: 5px dotted yellow;
}

.invalid-field {
    border: 5px dashed orange;
}

Nous définissons une bordure en pointillés jaune d’une largeur de 5px comme champ valide Classe CSS. Nous créons également un champ invalide Classe CSS qui utilise une bordure orange en pointillés de même largeur.

Comme dernière étape, nous devons attribuer le CustomFieldClassProvider classe au EditContext. Le code suivant nous permet de définir un fournisseur de classe de champ personnalisé sur un EditContext.

EditContext.SetFieldCssClassProvider(new CustomFieldClassProvider());

Nous ajoutons cette ligne à la fin du OnInitialized méthode dans notre composant Blazor.

Lorsque nous démarrons l’application, nous pouvons voir les classes CSS personnalisées en action.

Activer/Désactiver le bouton Soumettre en fonction de la validation du formulaire

Parfois, nous souhaitons que le bouton Soumettre ne soit actif que lorsque le formulaire est dans un état valide.

Lorsque nous avons accès au EditContextnous pouvons implémenter ce comportement directement dans le code du modèle où nous définissons le bouton de soumission.

<button type="submit" disabled="@(!EditContext?.Validate())">Register</button>

Nous utilisons la valeur par défaut Attribut HTML désactivé et le Validate méthode sur le EditContext pour contrôler le comportement.

Lorsque nous démarrons l’application, nous pouvons voir que le bouton de soumission est désactivé sauf si tous les champs du formulaire sont valides. Dès que tous les champs de saisie contiennent une valeur valide, le bouton Soumettre est activé.

Modèles imbriqués, types de collections et types complexes

Outre les exemples abordés dans cet article, Blazor prend également en charge les modèles imbriqués, les types de collections et les types complexes comme modèle pour le EditForm composant.

Cependant, le système intégré DataAnnotationsValidator Le composant valide uniquement les objets de niveau supérieur qui ne sont pas des collections ou des types complexes. Pour ces types, nous devons utiliser le ObjectGraphDataAnnotationsValidator.

Au moment de la rédaction de cet article, le ObjectGraphDataAnnotationsValidator fait partie du package expérimental NuGet Microsoft.AspNetCore.Components.DataAnnotations.Validation.

Si vous souhaitez en savoir plus sur la validation de formulaires à l’aide de propriétés ou de collections de type complexe, je vous suggère de consulter ce package NuGet.

Conclusion

Dans cet article, nous avons appris à créer et à utiliser manuellement le EditContext taper. Cela nous offre un contrôle plus granulaire sur la façon dont le formulaire HTML est généré.

Nous avons également appris à mettre en œuvre un règle de validation personnalisée qui utilise les valeurs de plusieurs champs de formulaire pour créer une règle de validation. Nous avons enregistré la règle de validation sur le EditContext.

Par défaut, un formulaire Blazor créé à l’aide du EditForm Le composant est validé lorsque l’utilisateur appuie sur le bouton de soumission. Cependant, nous avons appris à modifier le comportement pour valider lorsque l’utilisateur modifie un champ en enregistrant une méthode de rappel d’événement sur le OnFieldChanged événement sur le EditContext.

Nous avons également appris que nous pouvons implémenter du code pour influencer la classe CSS ajoutée aux champs de saisie en implémentant une classe fournie au SetFieldCssClassProvider propriété du EditContext.

Enfin et surtout, nous avons appris à utiliser le EditContext à activer/désactiver le bouton Soumettre selon que le formulaire est valide.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.