Statut
-
Le composant input-date est un type de champ de saisie de date dérivé du composant input. Les informations ici concernent uniquement l'input-date. Pour les caractéristiques communes à tous les inputs, consultez la documentation du dsa-input.
Component checklist
Usage
<dsa-input-amount
id="input"
name="Amount"
label="Amount"
></dsa-input-amount>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input-amount/input-amount.js'
import type { DSAInputAmount } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSAInputAmount>('#input')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant de champ de saisie de date
import { Component } from '@angular/core';
import type { DSAInputAmount } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/input-amount/input-amount.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-input-amount
id="input"
name="Amount"
label="Amount"
></dsa-input-amount>
app.component.html
API
Ci-dessous quelques points d’attention spécifiques à ce dérivé du dsa-input:
Le composant, comparé à l’input “de base”, impose des restrictions strictes pour garantir une saisie propre et cohérente des montants numériques. Il 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.