*doing IT right!
9.4/10

Note globale sur 13 avis

Créer un custom validator avec Angular 12 et Ionic 5

Ce tutoriel Ionic 5 / Angular 12 vous permet de créer un custom input validator (ou validateur de champ personnalisé) dans Ionic.

 Nous allons donc créer un formulaire classique avec les méthodes Angular 12 et les components Ionic 5, puis vérifier un champ en particulier grâce à notre validator.

Notre custom validator vérifiera le champ email pour savoir si le nom de domaine de l'email est autorisé ou pas. Exemple :

-->Code
// Seul @website.com est valide
monemail@website.com est valide
secondemail@website.com est valide
monemail@other.com est invalide
secondmail@website.fr est invalide
<--

Prérequis

  • Connaissances techniques de base avec Ionic 5 et Angular
  • NodeJS version 14, minimum
  • CLI Ionic à la version 5

Initialisation du projet Ionic

Le CLI de Ionic doit être installé globalement avec "npm install -g @ionic/cli", puis nous créons notre application mobile avec "ionic start". Choisir Angular, le nom de notre application mobile : "ionic-custom-validator", le template "blank". On patiente quelques instants et on crée ou non son compte Ionic. Accéder au projet avec votre éditeur de code favoris ! Pour vérifier que le projet à bien été généré, utiliser la commande "ionic serve", ce qui devrait ouvrir une fenêtre du navigateur avec notre application de base. Si tout semble fonctionner alors on peut commencer le développement.

Création de la validation de formulaire de base

Avec ce nouveau projet Ionic 5 qui fonctionne, nous allons directement ce qui est nécessaire pour les formulaires.

-->Code

// ionic-custom-validator/src/app/home/home.module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { IonicModule } from '@ionic/angular';

// Import des modules

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

@NgModule({

  imports: [

    CommonModule,

    // Import de FormsModule et ReactiveFormsModule

    FormsModule,

    ReactiveFormsModule,

    IonicModule,

    HomePageRoutingModule

  ],

  declarations: [HomePage]

})

export class HomePageModule {}

<--

 

Puis dans notre fichier "home.page.ts" importons aussi ce qui est nécessaire :

-->Code

// ionic-custom-validator/src/app/home/home.page.ts

...

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

...

<--

 

On déclare notre nouveau formulaire :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.ts

...

export class HomePage {

  form: FormGroup;

 

  constructor(private formBuilder: FormBuilder) {}

...

<--

Les imports sont terminés, on ajoute maintenant la configuration de base de notre formulaire avec le FormBuilder :

-->Code

// ionic-custom-validator/src/app/home/home.page.ts

...

constructor(private formBuilder: FormBuilder) {

    this.form = this.formBuilder.group({

        name: ['', [Validators.required]],

        age: ['', [Validators.required, Validators.min(18)]],

        email: ['', [Validators.required, Validators.email]]

    });

}

...

<--

Le formulaire contient un nom, un âge et l'email :

  • name : Requis
  • age : Requis et minimum 18
  • email : Requis et doit être au format email valide, type email@domain.com (attention ce n'est pas notre validator de nom de domaine d'email, seulement la syntaxe ici)

Créons une fonction qui permettra de savoir si notre formulaire est valide :

-->Code

// ionic-custom-validator/src/app/home/home.page.ts

...

submitForm() {

    if (this.form.valid) {

        return console.log('Le formulaire est validé !');

    } else {

        return console.error('Le formulaire n\'est pas valide !')

    }

}

...

<--

 

Développons maintenant la partie visible à l'utilisateur dans le fichier "home.page.html". Remplacer le contenu de ce fichier par :

-->Code

// ionic-custom-validator/src/app/home/home.page.html

<ion-header>

  <ion-toolbar>

    <ion-title>

      Formulaire

    </ion-title>

  </ion-toolbar>

</ion-header>

 

<ion-content>

 

</ion-content>

<--

 

Ajoutons dès maintenant quelques règles CSS pour modifier le visuel de notre futur formulaire :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.scss

form {

  margin: 0 auto;

  width: 90%;

 

  .item-input {

    background-color: #fff;

    border: 1px solid #62666d;

    border-radius: 4px;

    margin-top: 10px;

    --background: #fff;

  }

 

  ion-item {

    --background: #fff;

  }

 

  .input-error ion-text {

    margin-top: 5px;

    border-radius: 6px;

    padding: 5px;

    background-color: grey;

 

    ion-icon {

      font-size: 1.1em;

      vertical-align: text-bottom;

    }

  }

}

<--

Création du formulaire visible aux utilisateurs

Créons maintenant le formulaire étapes par étapes :

-->Code

// ionic-custom-validator/src/app/home/home.page.html

<ion-header>

  <ion-toolbar>

    <ion-title>

      Formulaire

    </ion-title>

  </ion-toolbar>

</ion-header>

 

<ion-content>

    <!-- Base du formulaire -->

    <form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

 

    </form>

</ion-content>

<--

 

On ajoute le premier champ "name" :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.html

...

<ion-content>

    <!-- Base du formulaire -->

    <form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

        <ion-item class="item-input" lines="none">

            <ion-input formControlName="name" type="text" inputmode="text" placeholder="Nom"></ion-input>

        </ion-item>

 

        <ion-item lines="none" class="input-error" *ngIf="!form.controls.name.valid && form.controls.name.dirty">

            <ion-text color="light">

                <ion-icon name="alert-circle-outline"></ion-icon>

                Le nom est requis

            </ion-text>

        </ion-item>

    </form>

</ion-content>

<--

 

Ouvrir l'application avec "ionic serve", écrire quelque chose dans le champ puis tout effacer. "Le nom est requis" devrait s'afficher car nous avons défini que ce champ était requis.

 

Ajout du champ "age" :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.html

...

<ion-content>

    <!-- Base du formulaire -->

    <form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

        ... champ name

        <ion-item class="item-input" lines="none">

            <ion-input formControlName="age" type="number" inputmode="numeric" placeholder="Age"></ion-input>

        </ion-item>

 

        <ion-item lines="none" class="input-error" *ngIf="!form.controls.age.valid && form.controls.age.dirty">

            <ion-text color="light">

                <ion-icon name="alert-circle-outline"></ion-icon>

                L'âge requis est d'au moins 18 ans

            </ion-text>

        </ion-item>

    </form>

</ion-content>

<--

 

En essayant ce nouveau champ, nous ne pouvons entrer que des chiffres puis la valeur minimal est de 18, pour 18 ans.

 

Ajout du champ "email" :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.html

...

<ion-content>

    <!-- Base du formulaire -->

    <form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

        ... champ name

        ... champ age

        <ion-item class="item-input" lines="none">

            <ion-input formControlName="email" type="email" inputmode="email" placeholder="Email" autocomplete="off"></ion-input>

        </ion-item>

 

        <ion-item lines="none" class="input-error" *ngIf="!form.controls.email.valid && form.controls.email.dirty">

            <ion-text color="light">

                <ion-icon name="alert-circle-outline"></ion-icon>

                Un email valide est requis

            </ion-text>

        </ion-item>

    </form>

</ion-content>

<--

 

Le champ email à dorénavant une validation basique. Nous ajoutons notre custom validator par la suite.

 

Finalisons le formulaire avec le bouton submit :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.html

...

<ion-content>

    <!-- Base du formulaire -->

    <form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

        ... champ name

        ... champ age

        ... champ email

        <ion-button type="submit" expand="block" color="primary">Envoyer</ion-button>

    </form>

</ion-content>

<--

 

Jouons un peu avec le formulaire en essayant plusieurs valeurs pour savoir si les champs sont valides ou pas. (en utilisant la console du navigateur)

 

Création du custom validator Angular

Le but étant de valider le domaine de l'email, Angular ne propose pas de validateur pour ça. Alors nous pouvons le créer !

 

Dans "ionic-custom-validator/src/" créer un dossier nommé "validators" et dans celui-ci un fichier nommé "email-domain.ts".

 

Puis dans ce nouveau fichier créer la base du validateur :

 

-->Code

// ionic-custom-validator/src/validators/email-domain.ts

import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

 

export function EmailDomainValidator(minLength: number): ValidatorFn {

  return (control: AbstractControl): ValidationErrors | null => {

    const length = control.value.length;

 

    return length < minLength ? {length: {value: control.value}} : null;

  };

}

<--

 

Une simple condition qui, si la longueur de l'email est inférieur à 15 alors il n'est pas valide. Si égale ou supérieure à 15 alors il l'est ! Il nous faut maintenant importer ce custom validator pour notre formulaire.

 

Ajoutons maintenant ce custom validator qui va vérifier notre input au fichier "home.page.ts" :

-->Code

// ionic-custom-validator/src/app/home/home.page.ts

...

import { EmailDomainValidator } from './../../validators/email-domain';

...

 

this.form = this.formBuilder.group({

    name: ['', [Validators.required]],

    age: ['', [Validators.required, Validators.min(18)]],

    // Ajout du validator avec un paramètre '15' qui correspond à 15 caractère minimum

    email: ['', { validators: [Validators.required, EmailDomainValidator(15), Validators.email]}]

});

<--

 

Essayez de nouveau le formulaire, un email valide mais avec moins de 15 caractères ne fonctionnera pas par exemple.

 

Cette fois ci nous allons créer le validator qui va vérifier le domaine de l'email :

 

-->Code

// ionic-custom-validator/src/validators/email-domain.ts

import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

 

export function EmailDomainValidator(): ValidatorFn {

  return (control: AbstractControl): ValidationErrors | null => {

    const domain = control.value.substring(control.value.indexOf('@') + 1, control.value.length);

 

    return domain !== 'website.com' ? {domain: {value: domain}} : null;

  };

}

<--

 

Une fonction simple qui récupère le contenu du champ email pour regarder le domaine. Ici si le domaine n'est pas égale à "website.com" alors l'email est considéré comme invalide. Dans le fichier "home.page.ts" il faut retirer le "15" de "EmailDomainValidator()".

 

Essayons et confirmons que notre custom validator fonctionne !

 

Côté formulaire visible, nous pouvons modifier la phrase d'erreur pour l'email en :

 

-->Code

// ionic-custom-validator/src/app/home/home.page.html

<ion-item lines="none" class="input-error" *ngIf="!form.controls.email.valid && form.controls.email.dirty">

    <ion-text color="light">

        <ion-icon name="alert-circle-outline"></ion-icon>

        Un email valide est requis et utilisant le domaine suivant : website.com

    </ion-text>

</ion-item>

<--

Contact

367 rue de saint-denis
45590 Saint Cyr en Val

ouvert de 9h à 17h