LgNumericBox

LgNumericBox<TValue> permet de saisir un nombre. Le champ filtre les caractères saisis, applique un format d'affichage, arrondit selon le mode configuré et peut afficher des boutons d'incrément / décrément. La valeur liée est un type numérique (int, long, decimal, double, float… ou leur version nullable).

<LgNumericBox Label="#Quantity" @bind-Value="_model.Quantity" />

Espace de noms : Lagoon.UI.Components
Hérite de : LgInputRenderBase<TValue> → LgInputBase<TValue> → LgAriaComponentBase → LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Saisie simple

Le nombre de décimales par défaut dépend du type lié (0 pour les entiers) et le format d'affichage par défaut est N<Decimals>. Sur mobile, le clavier virtuel numérique est forcé (inputmode="decimal").

OrderLinePage.razor
<LgNumericBox Label="#Quantity" @bind-Value="_model.Quantity" />

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

    private sealed class OrderLineVm
    {
        public int? Quantity { get; set; }
    }
}

Décimales, format et arrondi

Decimals fixe le nombre de décimales, DisplayFormat remplace le format d'affichage et RoundValueMode le mode d'arrondi (par défaut, celui de la configuration de comportement de l'application). Prefix / Suffix (hérités) permettent d'afficher une unité.

PricePage.razor
<LgNumericBox Label="#UnitPrice"
              Decimals="2"
              RoundValueMode="MidpointRounding.AwayFromZero"
              Suffix="€"
              SuffixType="InputLabelType.Text"
              @bind-Value="_model.UnitPrice" />

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

    private sealed class PriceVm
    {
        public decimal? UnitPrice { get; set; }
    }
}

Boutons d'incrément

IncrementStep (non nul) affiche des boutons d'augmentation / diminution dans le champ, qui font varier la valeur du pas indiqué.

StockPage.razor
<LgNumericBox Label="#StockLevel"
              IncrementStep="10"
              @bind-Value="_model.StockLevel" />

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

    private sealed class StockVm
    {
        public int StockLevel { get; set; }
    }
}

Réagir au changement de valeur

OnChangingAsync est appelé avant l'affectation et permet d'annuler le changement (args.Cancel) ; OnChange (hérité) est appelé après. OnInput notifie chaque frappe, OnKey chaque touche relâchée et OnFocus la prise de focus. La réinitialisation par le bouton d'effacement déclenche aussi OnInput, avec une valeur vide (""), sauf si elle est annulée (OnChangingAsync, ConfirmationMessage). ParsingErrorMessage personnalise le message affiché quand la saisie n'est pas un nombre valide.

DiscountPage.razor
<LgNumericBox Label="#DiscountRate"
              Decimals="1"
              ParsingErrorMessage="#DiscountFormatError"
              OnChangingAsync="OnDiscountChangingAsync"
              @bind-Value="_model.DiscountRate" />

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

    // Appelé avant le changement : borne la remise sans passer par la validation du formulaire.
    private Task OnDiscountChangingAsync(ChangingEventArgs<double?> args)
    {
        if (args.NewValue is < 0 or > 100)
        {
            args.Cancel = true;
            ShowWarning("#DiscountOutOfRange");
        }
        return Task.CompletedTask;
    }

    private sealed class DiscountVm
    {
        public double? DiscountRate { get; set; }
    }
}

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
`Decimals`	`int?`	`null`	`LgNumericBox`	Nombre de décimales. Si `null`, déduit du type lié (0 pour les entiers).
`DisplayFormat`	`string`	`null`	`LgNumericBox`	Format d'affichage. Si `null`, `N<Decimals>` est utilisé.
`IncrementStep`	`TValue`	`default`	`LgNumericBox`	Pas des boutons d'augmentation / diminution. Les boutons ne sont affichés que si le pas est non nul.
`OnChangeDisabled`	`bool`	`false`	`LgNumericBox`	Désactive l'événement `onchange` DOM au profit de `oninput` (utilisé pour éviter des erreurs quand le contrôle est retiré du rendu).
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	`null`	`LgNumericBox`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`OnFocus`	`EventCallback<FocusEventArgs>`	—	`LgNumericBox`	Callback appelé à la prise de focus.
`OnInput`	`EventCallback<ChangeEventArgs>`	—	`LgNumericBox`	Callback appelé à chaque modification du contenu du champ, y compris sa réinitialisation par le bouton d'effacement (valeur `""`).
`OnKey`	`EventCallback<KeyboardEventArgs>`	—	`LgNumericBox`	Callback appelé au relâchement d'une touche.
`ParsingErrorMessage`	`string`	`#lgNumericBoxErrFormat`	`LgNumericBox`	Message d'erreur affiché quand la saisie n'est pas un nombre valide.
`Placeholder`	`string`	`null`	`LgNumericBox`	Texte indicatif affiché quand le champ est vide.
`RoundValueMode`	`MidpointRounding?`	`null`	`LgNumericBox`	Mode d'arrondi. Si `null`, le mode de la configuration de comportement de l'application s'applique.
`Prefix`	`string`	`null`	`LgInputRenderBase`	Préfixe affiché dans le champ (ex. une devise).
`PrefixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Nature du préfixe.
`Suffix`	`string`	`null`	`LgInputRenderBase`	Suffixe affiché dans le champ (ex. une unité).
`SuffixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Nature du suffixe.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Attributs HTML additionnels appliqués à l'élément rendu.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Donne le focus au champ lors du premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Message de confirmation affiché avant d'appliquer un changement de valeur.
`Container`	`IInputContainer<TValue>`	`null`	`LgInputBase`	Usage interne : rattache une cellule de GridView au champ.
`CssClass`	`string`	`null`	`LgInputBase`	Classes CSS additionnelles.
`Disabled`	`bool`	`false`	`LgInputBase`	Désactive le champ.
`DisplayName`	`string`	`null`	`LgInputBase`	Nom du champ utilisé dans les messages d'erreur de saisie.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Masque le message de validation sous le champ.
`Label`	`string`	`null`	`LgInputBase`	Libellé du champ.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Contenu personnalisé de la zone de libellé.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé après le changement de valeur.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé quand le champ est réinitialisé par le bouton d'effacement.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy requise pour modifier le champ.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy requise pour afficher le champ.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Affiche le champ en lecture seule.
`Required`	`bool?`	`null`	`LgInputBase`	Champ obligatoire. Si `null`, déduit de l'attribut `[Required]` de la propriété liée.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Affiche le bouton d'effacement. Si `null`, la configuration de comportement de l'application s'applique.
`ResetText`	`string`	`null`	`LgInputBase`	Texte du bouton d'effacement.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Libellé accessible (`aria-label`) du bouton d'effacement.
`Tooltip`	`string`	`null`	`LgInputBase`	Bulle d'aide.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`Value`	`TValue`	—	`LgInputBase`	Valeur liée (`@bind-Value`), de type numérique.
`ValueChanged`	`EventCallback<TValue>`	—	`LgInputBase`	Callback de mise à jour de la valeur liée.
`ValueExpression`	`Expression<Func<TValue>>`	—	`LgInputBase`	Expression identifiant la propriété liée.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

Paramètres en cascade

LgNumericBox consomme aussi des paramètres fournis automatiquement par des composants ancêtres (vous n'avez pas à les définir) : ParentAuthorizeView (LgAuthorizeView) et le contexte d'édition d'un LgEditForm parent.

Événements

Événement	Type	Description
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	Avant le changement de valeur ; `args.Cancel = true` annule le changement.
`OnChange`	`EventCallback<ChangeEventArgs>`	Après le changement de valeur.
`OnInput`	`EventCallback<ChangeEventArgs>`	À chaque modification du contenu du champ, y compris sa réinitialisation par le bouton d'effacement (valeur `""`, sauf si la réinitialisation est annulée).
`OnKey`	`EventCallback<KeyboardEventArgs>`	Au relâchement d'une touche dans le champ.
`OnFocus`	`EventCallback<FocusEventArgs>`	À la prise de focus du champ.
`OnReset`	`EventCallback<ChangeEventArgs>`	À la réinitialisation par le bouton d'effacement.

Bonnes pratiques / accessibilité

Choisissez le type lié en fonction du besoin métier (decimal pour les montants) : le nombre de décimales par défaut en découle.
Pour une unité ou une devise, préférez Prefix / Suffix à un libellé dans le Label : l'information reste visible au plus près de la valeur.

Référence complète

Tous les paramètres (hérités compris) : Référence API — LgNumericBox.

Composants liés

LgTextBox — saisie de texte.
LgGridNumericColumn — colonne numérique d'un LgGridView.

Utilisation​

Démonstration​

Saisie simple​

Décimales, format et arrondi​

Boutons d'incrément​

Réagir au changement de valeur​

Propriétés​

Événements​

Bonnes pratiques / accessibilité​

Composants liés​