Statut
Component checklist
Usage
<dsa-textarea
id="textarea"
name="comment"
label="Commentaire"
></dsa-textarea>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/textarea/textarea.js'
import type { DSATextarea } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSATextarea>('#input')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant zone de texte
import { Component } from '@angular/core';
import type { DSATextarea } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/textarea/textarea.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-textarea
id="textarea"
name="comment"
label="Commentaire"
></dsa-textarea>
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 |
|
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 |
- |
|
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 |
'' |
|
maxlength |
La longueur maximale du champ qui sera considéré comme valide |
number |
- |
|
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 |
'' |
|
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 |
|
resize |
Control comment le textarea devrait être redimensionnée |
none vertical auto |
vertical |
|
required |
Rend le champ obligatoire |
boolean |
false |
|
rows |
Le nombre de rangée à afficher par défaut |
number |
4 |
|
size |
La taille du champ de saisie |
small medium large |
medium |
|
spellcheck |
Active la correction ortographique sur le champ |
boolean |
true |
|
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 |
|
scrollPosition() |
Obtient ou définit la position de défilement de la zone de texte |
(position?: ScrollPosition) => ScrollPosition \| undefined
ScrollPosition: { top?: number, left?: number } |
|
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-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 |