# Etude des composants Ionic: cas du composant "ion-input"

Ionic est un framework de développement d'applications mobiles offrant une multitude de composants pour simplifier la création d'interfaces utilisateurs modernes et attractives. Parmi ces composants, l'un des plus fondamentaux et presque omniprésents est le composant `ion-input` en tant qu'élément clé pour interagir avec l'utilisateur, que nous explorerons en détail et illustrerons comment l'intégrer dans vos projets Ionic pour des expériences utilisateur fluides et interactives.

### Qu'est ce que `ion-input` ?

Le composant `ion-input` est conçu pour créer différents types de champs de saisie flexibles et personnalisables, ce qui permet aux développeurs de gérer facilement les entrées des utilisateurs dans les applications Ionic. Il s'intègre parfaitement à la stylisation et à la thématique d'Ionic, offrant une apparence cohérente sur différentes plateformes.

### Comment l'utiliser et le personnaliser ?

Pour une bonne implémentation du composant `ion-input` sur une interface utilisateur, il faut l'inclure dans un composant `ion-item` afin de créer une structure de formulaire conviviale. Voici un exemple de base :

```xml
<ion-item>
    <ion-input label="Default input"></ion-input>
</ion-item>
```

Dans l'exemple précédent, nous avons créé un simple composant `ion-input` basique, sans aucune personnalisation de styles et avec qu'une propriété `label` qui définit le libellé du champs de saisie.

Allons maintenant plus loin et utilisons les propriétés et les types pour ajouter d'autres fonctionnalités au composant.

* **Quelques propriétés personnalisées du composant** `ion-input`
    
    * ***type***
        
        Cette propriété permet de spécifier le type de contrôle à afficher. Le type par défaut est *text*. On a entre autre les types : *date, email, password, search, tel, time, url, month, week* et *datetime-local*
        
        ```xml
        <ion-item>
            <ion-input label="Adresse Email" type="email" ></ion-input>
        </ion-item>
        ```
        
    * ***placeholder***
        
        Cette propriété permet de spécifier le texte d'instruction qui s'affiche avant que l'input n'ait une valeur. Cette propriété ne s'applique que lorsque la propriété de type est définie sur "email", "number", "password", "search", "tel", "text" ou "url", sinon elle est ignorée.
        
        ```xml
        <ion-item>
            <ion-input 
                label="Adresse Email" 
                type="email" 
                placeholder="Entrez votre adresse email ici">
            </ion-input>
        </ion-item>
        ```
        
    * ***value***
        
        Cette propriété permet de spécifier la valeur par défaut du champs de saisie
        
        ```xml
        <ion-item>
            <ion-input 
                label="Adresse Email" 
                type="email" 
                value="example@gmail.com">
            </ion-input>
        </ion-item>
        ```
        
    * ***required***
        
        Cette propriété permet de spécifier si le champs de saisie doit etre requis ou pas. Il est de type booléen.
        
        ```xml
        <ion-item>
            <ion-input 
                label="Adresse Email" 
                type="email" 
                required="true"
                value="example@gmail.com">
            </ion-input>
        </ion-item>
        ```
        
    * ***inputmode***
        
        Cette propriété permet de spécifier au navigateur le type de clavier à afficher. Il peut etre de type : "none", "text", "tel", "url", "email", "numeric", "decimal" ou "search".
        
        ```xml
        <ion-item>
            <ion-input 
                label="Adresse Email" 
                type="email" 
                inputmode="email"
                required="true"
                value="example@gmail.com">
            </ion-input>
        </ion-item>
        ```
        
    * ***disabled***
        
        Cette propriété permet de spécifier si le champs de saisie doit etre désactivé ou pas. Il est de type booléen. Si `true` , l'utilisateur ne pourra pas saisir aucune information dans le champs de saisie.
        
        ```xml
        <ion-item>
            <ion-input 
                label="Information" 
                type="text" 
                disabled="true"    
                value="Vous ne pouvez rien saisir ici">
            </ion-input>
        </ion-item>
        ```
        
        Nous venons d'énumérer ci-dessus quelques propriétés les plus utilisées. On peut aussi ajouter à ces derniers les propriétés ci-après : `autocapitalize`, `autocomplete`, `autocorrect`, `autofocus`, `clearInput`, `clearOnEdit color`, `size`, `shape`, `readonly`, `pattern`, `name`, `multiple`, `mode`, `minlength`, `min`, `enterkeyhint`, `labelPlacement`, `maxlength`, `max`, `legacy`, `fill`, `errorText`, `helperText`, `debounce` que vous pouvez étudier [ici](https://ionicframework.com/docs/api/input#properties).
        

* **Quelques évènements personnalisés du composant** `ion-input`
    
    Afin de réagir aux différentes interactions de l'utilisateur avec le composant `ion-input`, Ionic met à disposition plusieurs évènements dont `ionChange`, `ionFocus`, `ionInput` et `ionBlur`.
    
    * ***ionChange***
        
        L'événement `ionChange` est déclenché lorsque l'utilisateur modifie la valeur de l'entrée. Contrairement à l'événement `ionInput`, l'événement `ionChange` n'est déclenché que lorsque les modifications sont validées, et non lorsque l'utilisateur saisit.
        
        ```xml
        <ion-item>
            <ion-input 
                (ionChange)="setValue()"
                label="Adresse Email" 
                type="email" 
                inputmode="email"
                required="true"
                value="example@gmail.com">
            </ion-input>
        </ion-item>
        ```
        
    * ***ionInput***
        
        L'événement `ionInput` est déclenché chaque fois que l'utilisateur modifie la valeur de l'entrée. Contrairement à l'événement `ionChange`, l'événement `ionInput` est déclenché pour chaque modification de la valeur de l'entrée. Cela se produit généralement à chaque frappe de touche lorsque l'utilisateur tape. Pour les éléments qui acceptent la saisie de texte (*type=text, type=te*l, etc.), l'interface est `InputEvent` ; pour les autres, l'interface est `Event`. Si l'entrée est effacée lors de la modification, le type est `null`.
        
        ```xml
        <ion-item>
            <ion-input 
                (ionInput)="setValue()"
                label="Adresse Email" 
                type="email" 
                inputmode="email"
                required="true"
                value="example@gmail.com">
            </ion-input>
        </ion-item>
        ```
        
    * ***ionFocus*** et ***ionBlur***
        
        Ces événements sont déclenchés lorsque le champs de saisie perd (`ionBlur`) ou gagne (`ionFocus`) le focus.
        
        ```xml
        <ion-item>
            <ion-input 
                (ionInput)="setValue()"
                (ionFocus)="winFocus()"
                (ionBlur)="loseFocus()"
                label="Adresse Email" 
                type="email" 
                inputmode="email"
                required="true"
                value="example@gmail.com">
            </ion-input>
        </ion-item>
        ```
        
* **Quelques styles personnalisés du composant** `ion-input`
    
    Le composant `ion-input` est livré avec une variété de propriétés `CSS` que vous pouvez personnaliser pour adapter l'apparence de l'input à vos préférences en matière de design. Vous trouverez ci-dessous, quelques-unes des propriétés CSS personnalisées les plus couramment utilisées :
    
    * `--background` : qui permet de spécifier la couleur de l'arrière-plan de l'input
        
    * `--border-color` : qui permet de spécifier la couleur de la bordure en dessous de l'input lorsqu'on utilise les propriétés *helperText*, *errorText* ou *counter*
        
    * `--border-style` : qui permet de spécifier le style de la bordure en dessous de l'input lorsqu'on utilise les propriétés *helperText*, *errorText* ou *counter*
        
    * `--color` : qui permet de spécifier la couleur du texte de l'input
        
    * `--highlight-color-focused` : qui permet de spécifier la couleur de la bordure inférieure de l'input lorsqu'il a le focus de l'utilisateur
        
    * `--highlight-color-invalid` : qui permet de spécifier la couleur de la bordure inférieure de l'input lorsque la donnée entrée par l'utilisateur est invalide
        
    * `--highlight-color-valid` : qui permet de spécifier la couleur de la bordure inférieure de l'input lorsque la donnée entrée par l'utilisateur est valide
        
    * `--placeholder-color` : qui permet de spécifier la couleur du placeholder de l'input
        
    * `--padding-bottom` : qui permet de spécifier la marge intérieur basse de l'input
        
    * `--padding-end` : qui permet de spécifier la marge intérieur au bout de l'input
        
    * `--padding-start` : qui permet de spécifier la marge intérieur au début de l'input
        
    * `--padding-top` : qui permet de spécifier la marge intérieur haute de l'input
        
        ```xml
        ion-input {
            --background: #93e9be;
            --highlight-color-valid: #9ce0be;
            --highlight-color-invalid: #88f4be;
            --highlight-color-focused: #88f4be;
        
            --color: black;
            --placeholder-text: #93e9be
        
            --border-radius: 0;
            --border-color: #000;
            --border-style: solid;
            --border-width: 1px;
        
            --padding-top: 10px;
            --padding-bottom: 10px;
          }
        ```
        
        Ionic propose également d'autres propriétés CSS telles que `--placeholder-opacity`, `--placeholder-font-weight`, `--placeholder-font-style`, `--border-radius` que vous pouvez étudier [ici](https://ionicframework.com/docs/api/input#css-custom-properties-1)
        
* **Lecture et écriture avec le composant** `ion-input`
    
    Selon le framework *JavaScript* utilisé, les méthodes de lecture et d'écriture sur un champ de saisie s'applique parfaitement au composant `ion-input` .
    
    En prenant l'exemple avec le framework Angular, voici comment utiliser la directive `ngModel` :
    
    ```javascript
    // app.module.ts
    
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    import { MyApp } from './app.component';
    
    @NgModule({
      declarations: [MyApp],
      imports: [IonicModule.forRoot(), FormsModule],
      bootstrap: [MyApp],
    })
    export class MyAppModule {}
    ```
    
    ```xml
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>
    ```
    
    ```javascript
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
    })
    export class AppComponent {
      username: string = ''; // Initialize the variable
    }
    ```
    

En résumé, le composant `ion-input` répond parfaitement au besoin lié à la saisie utilisateur dans les applications mobiles. Grâce à des fonctionnalités telles que les différents types d'entrée, la validation, la thématisation et l'intégration facile avec la lecture et l'écriture, les développeurs peuvent créer des formulaires transparents et conviviaux.

> Pour plus d'informations :
> 
> ***👉***[Ion-input](https://ionicframework.com/docs/api/input)