Statut
Component checklist
Usage
<dsa-input-mask
id="input-mask"
label="Date de naissance"
placeholder="JJ/MM/AAAA"
>
</dsa-input-mask>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input-mask/input-mask.js'
import type { DSAInputMask } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSAInputMask>('#input')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant champ de saisie - masque
import { Component } from '@angular/core';
import type { DSAInputMask } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/input-mask/input-mask.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-input-mask
id="input-mask"
label="Date de naissance"
placeholder="JJ/MM/AAAA"
>
</dsa-input-mask>
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 |
- |
|
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 |
|
clearable |
Affiche le bouton supprimer lorsque le champ a une valeur définie |
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 |
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 |
- |
|
label |
Le label du champ. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
mask |
Utilisé pour définir les caractères autorisés ou attendus dans une chaîne ou une entrée de données. Il spécifie les caractères autorisés qui peuvent être présents à des positions spécifiques dans une séquence. Il doit respecter le format défini par l'espace réservé, mais avec ses propres caractères autorisés. - Tous les caractères : comprend tous les caractères, qu'il s'agisse de lettres ou de chiffres. Exemple: _ - Caractères numériques: spécifie les valeurs numériques qui peuvent être incluses. Exemple: #dDmMyYaA09 - Caractères alphabétiques : indique les caractères alphabétiques autorisés dans la séquence. Exemple: ?LaA |
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 |
'' |
|
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 |
|
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 |
‘' |
|
variant |
La variante du champ de saisie |
layer base |
base |
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 |
|
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 |
Slots
|
Nom |
Description |
|---|---|
|
help-text |
Texte qui décrit comment utiliser le champ de saisie. Alternativement, vous pouvez utiliser l'attribut help-text |
|
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 |
|
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 |