Statut
Component checklist
Usage
<dsa-input-phone
id="phone"
name="phone"
label="Téléphone"
></dsa-input>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input-phone/input-phone.js'
import type { DSAInputPhone } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSAInput>('#phone')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant champ de saisie - téléphone
import { Component } from '@angular/core';
import type { DSAInputPhone } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/input-phone/input-phone.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-input-phone
id="phone"
name="phone"
label="Téléphone"
></dsa-input>
Code HTML à implémenter pour utiliser le composant champ de saisie - téléphone
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 |
- |
|
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[] |
'' |
|
inputPrefix input-prefix |
Un préfix affiché dans le champ pour indiquer à l'utilisateur que le premier chiffre n'est pas nécéssaire |
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 |
'' |
|
label |
Le label du champ. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
phoneNumber (pas d'attribut) |
Le numéro de téléphone sans indicateur pays |
string |
'' |
|
phonePrefix (pas d'attribut) |
L'indicateur pays du numéro de téléphone |
+33 +262 +508 +590 +594 +596 +681 +687 +689 |
'+33' |
|
placement |
Le placement privilégier du panneau de l'indicatif pays. À savoir que le placement peux varier en fonction des besoins pour afficher le panneau à l'intérieur du viewport |
top-start bottom-start |
bottom-start |
|
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ée avec l'attribut pattern |
boolean |
false |
|
value |
La valeur du numéro de téléphone sous le format E.164, 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 |
|---|---|
|
label |
Le slot du libellé du champ de saisie. Alternativement, vous pouvez utiliser l'attribut label |
|
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 |