Statut
Component checklist
Usage
<dsa-input
id="input"
type="text"
name="name"
label="Nom"
autocomplete="family-name"
></dsa-input>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input/input.js'
import type { DSAInput } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSAInput>('#input')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant de champ de saisie
import { Component } from '@angular/core';
import type { DSAInput } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/input/input.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-input
id="input"
type="text"
name="name"
label="Nom"
autocomplete="family-name"
></dsa-input>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un nom accessible dans le cas où aucun label n'est fourni. |
string |
- |
|
autocapitalize |
Contrôle la capitalisation automatique lorsque l'utilisateur entre une saisie dans le champ. |
off none on sentences words characters |
- |
|
autocomplete |
Spécifie l'autorisation dont dispose le navigateur pour fournir une assistance lors du remplissage des valeurs des champs de formulaire |
string |
- |
|
autocorrect |
Indique si la fonction de correction automatique du navigateur est activée ou désactivée |
on off |
- |
|
autofocus |
Indique que le champ doit recevoir le focus au chargement de la page |
boolean |
false |
|
calendarStartDate calendar-start-date |
La valeur de départ du calendrier si aucune date n'est sélectionnée. |
string |
Date du jour |
|
clearable |
Affiche le bouton supprimer lorsque le champ a une valeur définie |
boolean
|
false |
|
counter |
Affiche le compteur de caractère si l'attribut maxlength est renseigné |
boolean
|
false |
|
defaultValue |
La valeur par défaut du contrôle. Utilisé principalement pour la remise à zero du form control |
string |
- |
|
description |
Fournit une description au composant pour une meilleure accessibilité. |
string |
'' |
|
disabled |
Désactive le champ de saisie |
boolean |
false |
|
enterkeyhint |
Utilisé pour personnaliser le libellé ou l'icône de la touche Entrée sur les claviers virtuels |
enter done go next previous search send |
- |
|
success |
Indique si le composant doit être en état de succès |
boolean |
false |
|
successMessage success-message |
Un message de succès qui est affiché lorsque l'attribut `success` est définie à `true`. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "|". |
string | string[] |
'' |
|
error |
Indique si le composant doit être en état d'erreur |
boolean |
false |
|
errorMessage error-message |
Un message d'erreur qui est affiché lorsque l'attribut error est définie à true. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "|". |
string | string[] |
'' |
|
form |
Par défaut, les contrôles de formulaire sont associés à l'élément de formulaire parent le plus proche. Cet attribut permet de placer le contrôle de formulaire en dehors d'un formulaire et de l'associer au formulaire qui a cet identifiant. Le formulaire doit être dans le même document ou racine fantôme pour que cela fonctionne |
string |
'' |
|
helpText help-text |
Le help-text du champ. Pour afficher du HTML, utilisez le slot help-text |
string |
'' |
|
inputmode |
Indique au navigateur quel type de données sera saisi par l'utilisateur, lui permettant d'afficher le clavier virtuel approprié sur les appareils compatibles |
none text decimal numeric search tel email url |
- |
|
label |
Le label du champ. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
lang |
La langue dans laquelle la date doit être formattée pour un input type="date". Si non définie, le format de date sera celui du système. |
string |
'' |
|
max |
La valeur maximale du champ. Uniquement applicable sur le champ date et number |
number | string |
- |
|
maxlength |
La longueur maximale du champ qui sera considéré comme valide |
number |
- |
|
min |
La valeur minimale du champ. Uniquement applicable sur le champ date et number |
number | string |
- |
|
minlength |
La longueur minimale du champ qui sera considéré comme valide |
number |
- |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
passwordVisible password-visible |
Determine l'affichage ou non du mot de passe. Uniquement applicable sur le champ de type password |
boolean |
false |
|
pattern |
Un modèle d'expression régulière pour valider ou invalider la valeur saisie |
string |
'' |
|
placeholder
|
Un texte qui apparaît dans le contrôle lorsqu'aucune valeur n'y est écrite |
string |
'' |
|
readonly |
Rend le champ en lecture seule |
boolean |
false |
|
required |
Rend le champ obligatoire |
boolean |
false |
|
size |
La taille du champ de saisie |
small medium large |
'medium' |
|
spellcheck |
Active la correction orthographique sur le champ |
boolean |
true |
|
step |
Spécifie la granularité à laquelle la valeur doit adhérer, ou la valeur spéciale any qui signifie qu'aucun pas n'est impliqué, autorisant n'importe quelle valeur numérique. S'applique uniquement aux types de champs date et de number |
number | any |
- |
|
type |
Le type du champ. Fonctionne de la même manière qu'un élément d'entrée natif, mais seul un sous-ensemble de type est pris en charge |
date datetime-local email number password search tel text time url text amount |
text |
|
validate |
Si l'attribut est à true , la valeur de l'input est validé avec l'attribut pattern |
boolean |
false |
|
value |
La valeur du contrôle, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
valueAsDate |
Obtient ou définit la valeur actuelle en tant qu'objet Date. Renvoie null si la valeur ne peut pas être convertie |
accesseur:
modificateur: (newValue: Date | null) => void
|
- |
|
valueAsNumber |
Obtient ou définit la valeur actuelle sous forme de nombre. Renvoie NaN si la valeur ne peut pas être convertie |
accesseur: () => number
modificateur: (newValue: number) => void |
- |
|
variant |
La variante du champ de saisie |
layer base |
'base' |
|
hideCalendar hide-calendar |
(type date) Cache le bouton d'ouverture du calendrier. |
boolean |
false |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
blur()
|
Enlève le focus du champ |
() => void |
|
checkValidity() |
Vérifie la validité du champ mais ne montre pas de message de validation |
() => boolean |
|
focus() |
Met le focus sur le champ |
(options?: FocusOptions) => void |
|
getForm() |
Obtient le formulaire associé si il existe |
() => HTMLFormElement | null |
|
hideDatePicker() |
Cache le calendrier pour les type="date" |
() => void |
|
reportValidity() |
Vérifie la validité et montre le message du navigateur si le champ est invalide |
() => boolean |
|
select() |
Sélectionne tout le texte dans le champ |
() => void |
|
setCustomValidity() |
Défini un message de validation personnalisé |
(message: string) => void |
|
setRangeText() |
Remplace une portion de texte avec la nouvelle chaine de caractère |
(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => void |
|
setSelectionRange() |
Définit les positions de début et de fin de la sélection de texte (base 0) |
(selectionStart: number, selectionEnd: number, selectionDirection: 'forward' | 'backward' | 'none' = 'none') => void |
|
showDatePicker() |
Affiche le sélecteur le calendrier pour les type="date" |
() => void |
|
showTimePicker()
|
Affiche le sélecteur du navigateur pour le champ (ne fonctionne que si le navigateur le prend en charge pour le type d'entrée) |
() => void |
|
stepUp()
|
Incrémente la valeur d'un champ de type numérique de la valeur de l'attribut step, éventuellement multipliée par le paramètre numérique qui lui est passé |
(?number) => void |
|
stepDown() |
Diminue la valeur d'un champ de type numérique de la valeur de l'attribut step, éventuellement multipliée par le paramètre numérique qui lui est passé |
(?number) => void |
Slots
|
Nom |
Description |
|---|---|
|
label |
Le slot du libellé du champ de saisie. Alternativement, vous pouvez utiliser l'attribut label |
|
prefix |
Utilisé pour ajouter une icône de présentation ou un élément similaire à l'entrée |
|
suffix |
Utilisé pour ajouter une icône de présentation ou un élément similaire à la fin |
|
help-text |
Texte qui décrit comment utiliser le champ de saisie. Alternativement, vous pouvez utiliser l'attribut help-text |
|
tooltip |
Texte qui permet de passer des informations additionelles à coté du libellé |
Événements
|
Nom |
Description |
|---|---|
|
dsa-blur |
Émis lorsque le champ de saisie perd le focus |
|
dsa-change |
Émis lorsque la valeur du champ de saisie change |
|
dsa-clear |
Émis lorsque le bouton supprimer est activé |
|
dsa-focus |
Émis lorsque le champ de saisie obtient le focus |
|
dsa-input |
Émis lorsque le champ de saisie reçoit une entrée |
|
dsa-invalid |
Émis lorsque le contrôle de formulaire vérifie la validité du champ et que les contraintes ne sont pas respectées |
Variables CSS
|
Variable |
Description |
Valeur par défaut |
|---|---|---|
|
--input-field-width |
Largeur de la boîte du champ de saisie | Valeurs acceptées par la propriété CSS width (MDN). |
100%, à l'exception du type date pour lequel la valeur est unset |
Type = “time”
Ci-dessous quelques points d’attention :
|
Attribut |
Valeur attendue |
Exemple |
|---|---|---|
|
min |
Chaine de caractère suivant le format “time value” (MDN), “HH:mm” ou “HH:mm:ss”. Valeur par défaut : ”00:00” |
”08:00” |
|
max |
Chaine de caractère suivant le format “time value” (MDN), “HH:mm” ou “HH:mm:ss”. Valeur par défaut : ”23:59” |
”19:00” |
|
step |
Valeur en secondes. Si la valeur est inférieure à 60, le champ affichera également les secondes. Valeur par défaut : 60 |
900 (15 minutes) |
Type = “date”
Ci-dessous quelques points d’attention :
|
Attribut |
Valeur attendue |
Exemple |
|---|---|---|
|
value |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2024-12-25” |
|
min |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2004-06-30” |
|
max |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2007-03-13” |
|
calendar-start-date |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2025-05-05” |
|
lang |
Chaine de caractères suivant la RFC 5646 (MDN), “ab-CD”. |
"fr-FR" |
Type = “amount”
Le type amount est un type personnalisé, qui impose des restrictions strictes pour garantir une saisie propre et cohérente des montants numériques. Ce type accepte uniquement :
- Des chiffres (0-9) pour représenter des montants numériques.
- Le signe - pour les valeurs négatives, en début de saisie uniquement.
- La virgule , utilisée comme séparateur décimal.