Input

mail Email *

person Name

child_care Age

lock Password *

lock Confirm password *

Les entrées sont par défaut de type text. On peut préciser le type en indiquant password ou number.

Le paramètre required est optionnel : il fait apparaître un astérisque, indiquant à l’utilisateur que la saisie du champ est obligatoire.

Le paramètre icon est optionnel.

<script>
    import { Input } from 'gros/form'
    const form = { email: null, password: null }
</script>

<Input 
    required
    icon="mail" 
    label="Email" 
    bind:value={form.email}
/>
<Input 
    required
    password
    icon="lock"
    label="Password"
    bind:value={form.password} 
/>

param	default	required
value	”	false
icon	undefined	false
label	”	false
spellcheck	false	false
password	false	false
number	false	false
required	false	false
field	undefined	false
errors	undefined	false
big	false	false

Gros formulaire

mail Email *

person First name

person Name

lock Password *

lock Confirm password *

Pour obtenir un gros Input, on ajout le paramètre big.

<Input 
    big
    required 
    icon="mail" 
    label="Email" 
    bind:value={form.email}
/>

Gestion des erreurs

Les erreurs sont gérées côté serveur. Après soumission d’un formulaire, la réponse contient éventuellement un tableau d’erreurs.

L’objet errors est normé conformément à l’exemple ci-dessous :

const errors = [
    { field: 'email', message: 'Non valid email'},
    { field: 'password', message: 'Non secured'},
]

La totalité du tableau d’erreurs sera transmise à chaque composant Input via le paramètre errors . On précisera également le nom du champ grâce au paramètre field :

<Input 
    {errors}
    required
    field="email"
    label="Email" 
    bind:value={form.email}
/>

Côté client

Dans un contexte d’administration, la vérification des formulaires peut s’opérer côté client.

Cette vérification est sommaire, elle ne prend en compte que la règle des informations requises.

<script>
    import { check } from 'gros/form'

    const errors = check(form, ['email', 'name', 'firstname'])
</script>