LgEditForm

LgEditForm encadre les champs de saisie Lagoon : il construit l'EditContext du modèle, déclenche la validation et expose les événements de soumission. Tous les champs Lg* placés à l'intérieur participent automatiquement à la validation ; le validateur de DataAnnotations et le résumé de validation (LgValidationSummary) sont ajoutés automatiquement.

<LgEditForm Model="_model" OnValidSubmit="OnValidSubmitAsync">
    ...
</LgEditForm>

Espace de noms : Lagoon.UI.Components
Hérite de : LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Formulaire simple

Model désigne le modèle édité (un EditContext est construit pour lui) et OnValidSubmit est déclenché à la soumission quand le modèle est valide.

ContactEditPage.razor
<LgEditForm Model="_contact" OnValidSubmit="SaveAsync">
    <LgTextBox Label="#Name" @bind-Value="_contact.Name" />
    <LgTextBox Label="#Email" @bind-Value="_contact.Mail" />
    <LgButton Text="#Save" IsSubmit="true" />
</LgEditForm>

ContactEditPage.razor.cs
public partial class ContactEditPage : LgPage
{
    // Modèle édité par le formulaire : porte les DataAnnotations de validation.
    private readonly ContactVm _contact = new();

    // Déclenché uniquement quand le modèle est valide : c'est l'endroit où persister.
    private async Task SaveAsync(EditContext editContext)
    {
        try
        {
            await Http.TryPostAsync("api/contacts", _contact);
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }

    private sealed class ContactVm
    {
        [Required]
        [MaxLength(50)]
        public string Name { get; set; }

        [EmailAddress]
        public string Mail { get; set; }
    }
}

Les trois niveaux de validation

DataAnnotations : attributs posés sur les propriétés du modèle ([Required], [MaxLength(50)], [EmailAddress]…). Validés côté client (à la sortie du champ) et côté serveur.
IValidatableObject : règles multi-propriétés implémentées sur le modèle, évaluées à la soumission côté client et à la réception du vue-modèle côté serveur.
ModelState : validations qui ne peuvent se faire que côté serveur, dans l'action du contrôleur.

Validez toujours côté serveur

La validation côté client évite des allers-retours, mais elle se contourne facilement. Pour que la validation serveur soit automatique, le contrôleur doit hériter de LgControllerBase (ou porter [ApiController]).

Pour les modèles avec des propriétés imbriquées portant des DataAnnotations, activez UseValidationComplexModel="true" (le formulaire utilise alors un ObjectGraphDataAnnotationsValidator). Pour ajouter des erreurs métier par programme, utilisez LgValidator.

Soumission invalide et soumission brute

OnInvalidSubmit est déclenché quand le modèle est invalide. OnSubmit court-circuite la validation automatique : vous êtes alors responsable d'appeler EditContext.Validate(). Ne combinez pas OnSubmit avec OnValidSubmit / OnInvalidSubmit.

AuditFormPage.razor
<LgEditForm Model="_model"
            OnValidSubmit="OnValidSubmitAsync"
            OnInvalidSubmit="OnInvalidSubmit">
    <LgTextBox Label="#Reference" @bind-Value="_model.Reference" />
    <LgButton Text="#Save" IsSubmit="true" />
</LgEditForm>

AuditFormPage.razor.cs
public partial class AuditFormPage : LgPage
{
    private readonly AuditVm _model = new();

    // Persiste le modèle valide.
    private async Task OnValidSubmitAsync(EditContext editContext)
    {
        await Task.Delay(100);
        ShowSuccess("#Saved");
    }

    // Trace les tentatives de soumission invalides (audit, télémétrie…).
    private void OnInvalidSubmit(EditContext editContext)
    {
        ShowWarning("#FormInvalid");
    }

    private sealed class AuditVm
    {
        [Required]
        public string Reference { get; set; }
    }
}

Affichage des erreurs et des champs obligatoires

ErrorsDisplayOptions choisit comment les erreurs sont présentées (message sous le champ, résumé, toastr…) ; à défaut, la configuration de comportement de l'application s'applique. ValidationErrorMessage remplace le message générique du toastr. RequiredInputDisplayMode pilote le marquage des champs obligatoires / optionnels.

OrderFormPage.razor
<LgEditForm Model="_model"
            ErrorsDisplayOptions="EditFormErrorsDisplayOptions.InlineValidation | EditFormErrorsDisplayOptions.Summary"
            RequiredInputDisplayMode="RequiredInputDisplayMode.MandatoryOnly"
            ValidationErrorMessage="#OrderFormInvalid"
            OnValidSubmit="OnValidSubmitAsync">
    ...
</LgEditForm>

Confirmation, touche Entrée et suivi des modifications

ConfirmationMessage demande confirmation avant la soumission (c'est ici qu'il se place quand le bouton est en IsSubmit="true"). SubmitOnEnter (activé par défaut) soumet le formulaire sur la touche Entrée. IgnoreFormTracking exclut le formulaire du suivi des modifications (LgFormTracker), qui alerte sinon l'utilisateur en cas de fermeture avec des changements non enregistrés.

SettingsFormPage.razor
<LgEditForm Model="_model"
            ConfirmationMessage="#ConfirmSaveSettings"
            SubmitOnEnter="false"
            IgnoreFormTracking="true"
            OnValidSubmit="OnValidSubmitAsync">
    ...
</LgEditForm>

Propriétés

Toutes les propriétés [Parameter] du composant.

Nom	Type	Défaut	Déclaré dans	Description
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgEditForm`	Attributs HTML additionnels appliqués à l'élément `form`.
`ChildContent`	`RenderFragment<EditContext>`	`null`	`LgEditForm`	Contenu du formulaire (l'`EditContext` est disponible en contexte).
`ConfirmationMessage`	`string`	`null`	`LgEditForm`	Message de confirmation affiché avant la soumission.
`CssClass`	`string`	`null`	`LgEditForm`	Classes CSS additionnelles.
`EditContext`	`EditContext`	`null`	`LgEditForm`	Contexte d'édition fourni explicitement. Exclusif avec `Model`.
`ErrorsDisplayOptions`	`EditFormErrorsDisplayOptions?`	`null`	`LgEditForm`	Mode d'affichage des erreurs de validation. Si `null`, la configuration de l'application s'applique.
`IgnoreFormTracking`	`bool`	`false`	`LgEditForm`	Exclut le formulaire du suivi des modifications.
`Model`	`object`	`null`	`LgEditForm`	Modèle de premier niveau du formulaire (un `EditContext` est construit pour lui). Exclusif avec `EditContext`.
`OnInvalidSubmit`	`EventCallback<EditContext>`	—	`LgEditForm`	Callback déclenché à la soumission quand le modèle est invalide.
`OnSubmit`	`EventCallback<EditContext>`	—	`LgEditForm`	Soumission brute : la validation est alors à votre charge (`EditContext.Validate()`).
`OnValidSubmit`	`EventCallback<EditContext>`	—	`LgEditForm`	Callback déclenché à la soumission quand le modèle est valide.
`RequiredInputDisplayMode`	`RequiredInputDisplayMode?`	`null`	`LgEditForm`	Mode de marquage des champs obligatoires / optionnels. Si `null`, la configuration de l'application s'applique.
`SubmitOnEnter`	`bool`	`true`	`LgEditForm`	Soumet le formulaire sur la touche Entrée.
`UseValidationComplexModel`	`bool?`	`null`	`LgEditForm`	Active la validation des propriétés imbriquées (`ObjectGraphDataAnnotationsValidator`).
`ValidationErrorMessage`	`string`	`null`	`LgEditForm`	Remplace le message d'erreur générique du toastr (`#lgEditFormValidation`).

Paramètres en cascade

LgEditForm consomme le FormTracker (LgFormTracker) fourni par un ancêtre pour le suivi des modifications — vous n'avez pas à le définir.

Événements

Événement	Type	Description
`OnValidSubmit`	`EventCallback<EditContext>`	À la soumission, quand le modèle est valide.
`OnInvalidSubmit`	`EventCallback<EditContext>`	À la soumission, quand le modèle est invalide.
`OnSubmit`	`EventCallback<EditContext>`	À la soumission, sans validation automatique.

Énumérations associées

`EditFormErrorsDisplayOptions`

Mode d'affichage des erreurs de validation (propriété ErrorsDisplayOptions). Énumération [Flags] : les valeurs se combinent (ex. InlineValidation | Summary).

Valeur	Description
`None`	Aucun message affiché.
`ToastrGenericMessage`	Message générique dans le toastr (option par défaut).
`ToastrAllMessages`	Tous les messages de validation dans le toastr.
`ToastrOnBlur`	Message dans le toastr à la sortie de chaque champ.
`Summary`	Résumé des messages en tête de formulaire.
`InlineValidation`	Message sous chaque champ (option par défaut).

`RequiredInputDisplayMode`

Marquage des champs obligatoires / optionnels (propriété RequiredInputDisplayMode).

Valeur	Description
`None`	Aucune indication.
`OptionalOnly`	Indication sur les champs optionnels.
`MandatoryOnly`	Indication sur les champs obligatoires.
`Both`	Indication sur les deux.

Bonnes pratiques / accessibilité

Posez les contraintes sur le vue-modèle (DataAnnotations) : elles portent la validation client et serveur, ainsi que les déductions des champs (Required, MaxLength).
Un seul mode de soumission : OnValidSubmit / OnInvalidSubmit ou OnSubmit, pas les deux.
ConfirmationMessage du formulaire est incompatible avec celui d'un bouton IsSubmit="true" : placez la confirmation sur le formulaire.

Référence complète

Tous les paramètres : Référence API — LgEditForm.

Composants liés

Les champs de saisie de cette section : LgTextBox, LgSelect, LgCheckBox, LgCheckBoxList, LgRadioGroup, LgDateBox, LgMonthBox, LgWeekBox.

Pour ajouter des erreurs de validation personnalisées (règles métier, erreurs serveur) au formulaire : LgValidator.

Utilisation​

Formulaire simple​

Les trois niveaux de validation​

Soumission invalide et soumission brute​

Affichage des erreurs et des champs obligatoires​

Confirmation, touche Entrée et suivi des modifications​

Propriétés​

Événements​

Énumérations associées​

EditFormErrorsDisplayOptions​

RequiredInputDisplayMode​

Bonnes pratiques / accessibilité​

Composants liés​