LgTextBox

LgTextBox est le champ de saisie de texte : ligne simple, zone multiligne, mot de passe, avec masque de saisie optionnel. La valeur (une chaîne) se lie avec @bind-Value.

<LgTextBox Label="#ContactName" @bind-Value="_model.Name" />

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

Variantes spécialisées

LgTextBox sert de base à plusieurs champs prêts à l'emploi : LgSuggestBox (suggestions pendant la saisie) et LgColorPickerBox (sélecteur de couleur).

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Saisie simple

Placeholder affiche un texte d'attente, Disabled désactive le champ et ReadOnly l'affiche en lecture seule.

ContactPage.razor
<LgTextBox Label="#ContactName" @bind-Value="_model.Name" />

<LgTextBox Label="#FirstName"
           Placeholder="#TypeYourFirstName"
           Disabled="_isDisabled"
           ReadOnly="_isReadOnly"
           @bind-Value="_model.FirstName" />

ContactPage.razor.cs
public partial class ContactPage : LgPage
{
    // États pilotés par l'écran : désactivation et lecture seule du second champ.
    private bool _isDisabled;
    private bool _isReadOnly;

    private readonly ContactVm _model = new();

    private sealed class ContactVm
    {
        public string Name { get; set; }
        public string FirstName { get; set; }
    }
}

Mot de passe

TextMode="TextBoxMode.Password" masque les caractères saisis.

AccountPage.razor
<LgTextBox Label="#Password"
           TextMode="TextBoxMode.Password"
           @bind-Value="_model.Password" />

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

    private sealed class AccountVm
    {
        public string Password { get; set; }
    }
}

Zone multiligne

TextMode="TextBoxMode.Multiline" rend une zone de texte. Rows fixe le nombre de lignes, MinRows / MaxRows bornent l'ajustement automatique et AllowResize autorise le redimensionnement manuel.

CommentPage.razor
<LgTextBox Label="#Comment"
           TextMode="TextBoxMode.Multiline"
           Rows="5"
           MaxLength="500"
           AllowResize="true"
           @bind-Value="_model.Comment" />

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

    private sealed class CommentVm
    {
        public string Comment { get; set; }
    }
}

Masque de saisie

InputMaskKind choisit le type de masque et InputMask le motif (9 : chiffre, a : lettre, * : alphanumérique pour le type Mask). InputMaskPlaceholder fixe le caractère qui remplit les positions encore vides du masque (# avec le masque 99-99-99-99-99 affiche ##-##-##-##-##) ; sans valeur, le caractère par défaut _ est conservé. Il ne doit pas être confondu avec Placeholder, qui reste le texte indicatif affiché quand le champ est vide. AutoUnmask retourne la valeur sans le masque et ClearIncomplete vide la saisie si le masque est incomplet.

remarque

Le masque de saisie ne s'applique qu'au mode texte simple. Il est ignoré, sans erreur, quand TextMode vaut TextBoxMode.Multiline ou TextBoxMode.Password : la bibliothèque de masque cible les champs sur une seule ligne, et un caractère de remplissage n'aurait aucun sens sur des caractères de mot de passe déjà masqués.

PhonePage.razor
<LgTextBox Label="#Phone"
           InputMaskKind="InputMaskKind.Mask"
           InputMask="99 99 99 99 99"
           InputMaskPlaceholder="#"
           Placeholder="#PhoneHint"
           AutoUnmask="true"
           @bind-Value="_model.Phone" />

@* Masque de saisie email intégré. *@
<LgTextBox Label="#Email"
           InputMaskKind="InputMaskKind.Email"
           @bind-Value="_model.Email" />

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

    private sealed class PhoneVm
    {
        public string Phone { get; set; }
        public string Email { get; set; }
    }
}

Préfixe, suffixe et datalist

Prefix / Suffix affichent un texte ou une icône dans le champ. DataList rend un datalist HTML proposant des valeurs pendant la saisie.

ReferencePage.razor
<LgTextBox Label="#Reference"
           Prefix="REF-"
           PrefixType="InputLabelType.Text"
           DataList="_knownReferences"
           @bind-Value="_model.Reference" />

ReferencePage.razor.cs
public partial class ReferencePage : LgPage
{
    // Valeurs proposées par le navigateur pendant la saisie (datalist HTML).
    private readonly List<string> _knownReferences = new() { "1001", "1002", "2001" };

    private readonly ReferenceVm _model = new();

    private sealed class ReferenceVm
    {
        public string Reference { get; set; }
    }
}

Réagir au changement de valeur

OnChangingAsync est appelé avant l'affectation et permet d'annuler le changement (args.Cancel) ; OnChange est appelé après. OnInput notifie chaque frappe et OnKeyUp chaque touche relâchée. La réinitialisation par le bouton d'effacement déclenche aussi OnInput, avec une valeur vide (""), comme le navigateur pour un champ de recherche vidé par sa croix : un champ de filtre qui n'écoute que OnInput n'a donc pas besoin de brancher OnReset sur le même gestionnaire. Elle ne le déclenche pas si elle est annulée (OnChangingAsync, ConfirmationMessage).

CodePage.razor
<LgTextBox Label="#ProjectCode"
           OnChangingAsync="OnCodeChangingAsync"
           @bind-Value="_model.Code" />

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

    // Appelé avant le changement : refuse les codes réservés.
    private Task OnCodeChangingAsync(ChangingEventArgs<string> args)
    {
        if (args.NewValue == "ADMIN")
        {
            args.Cancel = true;
            ShowWarning("#ReservedCode");
        }
        return Task.CompletedTask;
    }

    private sealed class CodeVm
    {
        public string Code { 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
`AllowResize`	`bool`	`false`	`LgTextBox`	Autorise le redimensionnement lorsque `TextMode` vaut `TextBoxMode.Multiline`.
`AutoComplete`	`bool`	`false`	`LgTextBox`	Active l'autocomplétion du navigateur si `true` ; sinon l'attribut `autocomplete="off"` est rendu.
`AutoUnmask`	`bool`	`false`	`LgTextBox`	Retourne la valeur sans le masque lorsque `InputMask` est utilisé.
`ClearIncomplete`	`bool`	`false`	`LgTextBox`	Vide la valeur si le masque de saisie est incomplet.
`DataList`	`List<string>`	`null`	`LgTextBox`	Liste de valeurs utilisée pour rendre un `datalist` associé à l'entrée.
`InputMask`	`string`	`null`	`LgTextBox`	Masque de saisie appliqué au champ texte.
`InputMaskKind`	`InputMaskKind`	`None`	`LgTextBox`	Type de masque de saisie.
`InputMaskPlaceholder`	`string`	`null`	`LgTextBox`	Caractère remplissant les positions vides du masque de saisie (par exemple `#` avec le masque `99-99-99-99-99` affiche `##-##-##-##-##`). À ne pas confondre avec `Placeholder`. Sans valeur, le caractère par défaut du masque (`_`) est conservé. Ignoré lorsque `InputMaskKind` vaut `Regex`.
`MaxLength`	`int?`	`null`	`LgTextBox`	Nombre maximal de caractères. Si non défini, il est déduit de l'attribut `MaxLength` du modèle.
`MaxRows`	`int?`	`null`	`LgTextBox`	Nombre maximal de lignes lorsque `TextMode` vaut `TextBoxMode.Multiline`.
`MinRows`	`int?`	`null`	`LgTextBox`	Nombre minimal de lignes lorsque `TextMode` vaut `TextBoxMode.Multiline`.
`OnChangeDisabled`	`bool`	`false`	`LgTextBox`	Désactive le gestionnaire `onchange` natif du champ.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	`null`	`LgTextBox`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`OnFocus`	`EventCallback<FocusEventArgs>`	—	`LgTextBox`	Callback appelé à la prise de focus.
`OnInput`	`EventCallback<ChangeEventArgs>`	—	`LgTextBox`	Callback appelé à la saisie (`oninput`) et à la réinitialisation par le bouton d'effacement (valeur `""`).
`OnKeyUp`	`EventCallback<KeyboardEventArgs>`	—	`LgTextBox`	Callback appelé au relâchement d'une touche.
`Placeholder`	`string`	`null`	`LgTextBox`	Texte indicatif affiché quand le champ est vide. Distinct de `InputMaskPlaceholder`.
`Rows`	`int?`	`null`	`LgTextBox`	Nombre de lignes lorsque `TextMode` vaut `TextBoxMode.Multiline`.
`TextMode`	`TextBoxMode?`	`null`	`LgTextBox`	Mode du champ texte. `null` rend un champ texte simple.
`Prefix`	`string`	`null`	`LgInputRenderBase`	Préfixe affiché dans le champ.
`PrefixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Nature du préfixe.
`Suffix`	`string`	`null`	`LgInputRenderBase`	Suffixe affiché dans le champ.
`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<string>`	`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.
`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`	`string`	`null`	`LgInputBase`	Valeur liée (`@bind-Value`).
`ValueChanged`	`EventCallback<string>`	—	`LgInputBase`	Callback de mise à jour de la valeur liée.
`ValueExpression`	`Expression<Func<string>>`	—	`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

LgTextBox 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<string>, 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).
`OnKeyUp`	`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.

Énumérations associées

`TextBoxMode`

Mode de rendu du champ (propriété TextMode ; null rend un champ texte simple).

Valeur	Description
`Multiline`	Rend une zone de texte multiligne.
`Password`	Rend un champ mot de passe.

`InputMaskKind`

Type de masque de saisie (propriété InputMaskKind).

Valeur	Description
`None`	Aucun masque (valeur par défaut).
`Mask`	Masque basé sur `9` (chiffre), `a` (lettre) et `*` (alphanumérique).
`Regex`	Masque basé sur une expression régulière.
`Email`	Masque de saisie email.

Bonnes pratiques / accessibilité

Renseignez Label (ou AriaLabel) : le libellé porte l'accessibilité du champ et l'indicateur de champ obligatoire.
MaxLength est déduit de l'attribut MaxLength du modèle : posez la contrainte sur le vue-modèle plutôt qu'en dur dans le markup.
Pour un texte long édité en modale, préférez LgSummaryBox.

Référence complète

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

Composants liés

LgSuggestBox — saisie avec suggestions.
LgColorPickerBox — sélecteur de couleur basé sur LgTextBox.
LgSummaryBox — texte long édité en modale.
LgTagBox — liste de valeurs texte en étiquettes.

Utilisation​

Démonstration​

Saisie simple​

Mot de passe​

Zone multiligne​

Masque de saisie​

Préfixe, suffixe et datalist​

Réagir au changement de valeur​

Propriétés​

Événements​

Énumérations associées​

TextBoxMode​

InputMaskKind​

Bonnes pratiques / accessibilité​

Composants liés​