MFN Phone Input for Angular

Un composant Angular robuste pour la saisie et la validation de numéros de téléphone internationaux, avec sélection de pays, drapeaux, et formatage automatique.

Fonctionnalités

• 🌎 Prise en charge complète des formats internationaux
• 🚩 Affichage des drapeaux pour chaque pays
• ✅ Validation en temps réel selon les standards des pays
• 🔍 Recherche rapide parmi les pays disponibles
• 📱 Formatage automatique des numéros
• 🎨 Hautement personnalisable via CSS
• ⚡ Compatible avec Reactive Forms
• 📦 Léger et performant

Installation

npm install mfn-phone-input-new --save

Dépendances

Ce composant dépend de google-libphonenumber pour la validation et le formatage des numéros, et de flag-icons pour l'affichage des drapeaux.

npm install google-libphonenumber flag-icons --save

Configuration

Pour Angular 19+ (composants standalone), importez directement le composant là où vous en avez besoin :

import { MfnPhoneInputComponent } from 'mfn-phone-input-new';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MfnPhoneInputComponent,
    // autres imports...
  ],
  templateUrl: './contact-form.component.html'
})
export class ContactFormComponent {
  // ...
}

Assurez-vous d'inclure le CSS pour les drapeaux dans votre application. Ajoutez cette ligne à votre fichier styles global (par exemple styles.scss) :

@import "flag-icons/css/flag-icons.min.css";

Utilisation de base

<phone-input
  [formControl]="phoneControl"
  placeholder="Numéro de téléphone"
  [defaultCountryIso]="CountryIsoEnum.Senegal"
></phone-input>

Avec Reactive Forms :

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { MfnPhoneInputComponent, CountryIsoEnum } from 'mfn-phone-input-new';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [ReactiveFormsModule, MfnPhoneInputComponent],
  templateUrl: './contact-form.component.html'
})
export class ContactFormComponent {
  contactForm = this.fb.group({
    name: ['', Validators.required],
    phoneNumber: ['', Validators.required]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit(): void {
    if (this.contactForm.valid) {
      console.log(this.contactForm.value);
    }
  }
}

Exemple d'utilisation avec validation

<phone-input
  formControlName="telephone"
  [formatOnValid]="true"
  placeholder="Numéro de téléphone"
  [defaultCountryIso]="CountryIsoEnum.Senegal"
  [containerClass]="phoneIsValid ? 'form-control' : 'form-control is-invalid'"
  (validityChanged)="onPhoneValidityChanged($event)"
  (formattedPhoneChanged)="onFormattedPhoneChanged($event)"
  (fullInternationalNumberChanged)="onFullInternationalNumberChanged($event)">
</phone-input>

API

Inputs

| Propriété | Type | Par défaut | Description | |-----------|------|------------|-------------| | placeholder | string | 'Numéro de téléphone' | Texte d'indication du champ | | defaultCountryIso | CountryIsoEnum | CountryIsoEnum.Senegal | Code ISO du pays par défaut | | formatOnValid | boolean | true | Active le formatage automatique des numéros valides | | displayNationalFormat | boolean | true | Affiche le format national plutôt qu'international | | containerClass | string | '' | Classes CSS pour le conteneur principal | | dropdownClass | string | '' | Classes CSS pour la liste déroulante des pays | | countryBtnClass | string | '' | Classes CSS pour le bouton de sélection de pays | | inputClass | string | '' | Classes CSS pour le champ de saisie | | searchContainerClass | string | '' | Classes CSS pour le conteneur de recherche | | searchInputClass | string | '' | Classes CSS pour le champ de recherche | | countryItemClass | string | '' | Classes CSS pour les éléments de la liste des pays | | flagClass | string | '' | Classes CSS pour les drapeaux | | errorClass | string | '' | Classes CSS pour les messages d'erreur |

Outputs

| Propriété | Type | Description | |-----------|------|-------------| | phoneChanged | EventEmitter<string> | Émis lorsque le numéro de téléphone change | | countryChanged | EventEmitter<Country> | Émis lorsque le pays sélectionné change | | validityChanged | EventEmitter<boolean> | Émis lorsque la validité du numéro change | | formattedPhoneChanged | EventEmitter<string> | Émis lorsque le numéro formaté change | | fullInternationalNumberChanged | EventEmitter<string> | Émis lorsque le numéro international complet change |

Méthodes

| Méthode | Description | |---------|-------------| | getFullPhoneNumber() | Retourne le numéro complet avec le code pays | | resetPhoneInput() | Réinitialise le composant | | validatePhoneNumber() | Déclenche manuellement la validation |

Personnalisation

Styles

Le composant est livré avec des styles par défaut qui peuvent être remplacés ou étendus. Vous pouvez ajouter vos propres classes CSS à chaque élément du composant.

<phone-input
  [formControl]="phoneControl"
  containerClass="my-custom-container"
  inputClass="my-custom-input"
  countryBtnClass="my-custom-btn"
></phone-input>

Styling avancé

Pour une personnalisation plus avancée, vous pouvez surcharger les styles SCSS du composant dans votre propre fichier de styles.

.mfn-phone-container {
  border-radius: 8px;
  border-color: #3498db;

  &.invalid {
    border-color: #e74c3c;
  }
}

.mfn-phone-country-selector {
  background-color: #f8f9fa;
}

.mfn-phone-input {
  font-size: 16px;
}

Exemples

Formulaire de contact

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Nom</label>
    <input id="name" type="text" formControlName="name" class="form-control">
  </div>

  <div class="form-group">
    <label>Téléphone</label>
    <phone-input
      formControlName="phone"
      [defaultCountryIso]="'FR'"
      (validityChanged)="onPhoneValidityChanged($event)"
    ></phone-input>
    <small *ngIf="contactForm.get('phone')?.invalid && contactForm.get('phone')?.touched" class="text-danger">
      Veuillez entrer un numéro de téléphone valide
    </small>
  </div>

  <button type="submit" [disabled]="contactForm.invalid">Envoyer</button>
</form>

Avec pays favoris en haut de la liste

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MfnPhoneInputComponent, MfnPhoneInputService, CountryIsoEnum } from 'mfn-phone-input-new';

@Component({
  selector: 'app-custom-phone',
  standalone: true,
  imports: [ReactiveFormsModule, MfnPhoneInputComponent],
  templateUrl: './custom-phone.component.html'
})
export class CustomPhoneComponent {
  phoneControl = new FormControl('');
  favoriteCountries = [
    CountryIsoEnum.Senegal,
    CountryIsoEnum.France,
    CountryIsoEnum.UnitedStates
  ];

  constructor(private phoneService: MfnPhoneInputService) { }

  onPhoneValueChange(value: string): void {
    console.log('Numéro complet:', value);
  }

  onFormattedPhoneChange(value: string): void {
    console.log('Numéro formaté:', value);
  }
  
  onFullInternationalNumberChanged(value: string): void {
    console.log('Numéro international complet:', value);
  }
  
  onPhoneValidityChanged(isValid: boolean): void {
    this.phoneIsValid = isValid;
  }
}

Gestion des formats de numéros

Le composant offre plusieurs formats de numéros:

1. Format national - Affiche le numéro au format local du pays sélectionné (ex: 01 23 45 67 89 pour la France)
2. Format international - Affiche le numéro au format international sans le code pays (ex: 123 456 789)
3. Format international complet - Le numéro complet avec le code pays (ex: +33123456789)

Vous pouvez configurer l'affichage via la propriété displayNationalFormat et accéder aux différents formats via les événements.

Accessibilité

Le composant est conçu en tenant compte de l'accessibilité :

• Les éléments interactifs sont accessibles au clavier
• Les éléments ont des attributs ARIA appropriés
• Les contrastes de couleur sont conformes aux normes WCAG

Résolution des problèmes courants

Les drapeaux ne s'affichent pas

Assurez-vous d'avoir correctement importé les styles de flag-icons dans votre projet.

Problèmes de validation

La validation utilise la bibliothèque google-libphonenumber qui applique les règles strictes de format par pays. Assurez-vous que les numéros que vous testez sont au format attendu pour le pays sélectionné.

Format de la valeur du formulaire

La valeur du formulaire contient le numéro complet avec le code pays (ex: +33612345678). Si vous avez besoin d'un format différent, utilisez les événements formattedPhoneChanged ou fullInternationalNumberChanged.

Contributions

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request sur GitHub.

Licence

MIT