Présentation : Angular Formly

🎤 Angular Formly

Simplifier, structurer et maintenir vos formulaires Angular

Code:

1. Introduction

Formly est une librairie Angular permettant de générer des formulaires dynamiquement à partir d’une configuration JSON ou TypeScript.
Elle repose sur les Reactive Forms d’Angular, mais adopte une approche déclarative et centralisée.

🎯 Objectif principal

Réduire la duplication, améliorer la lisibilité et faciliter la maintenance des formulaires complexes.

2. Historique rapide

AngularJS

Création originale sous angular-formly 1.0.0 en 2014

Angular 2

Reprise et adaptation pour Angular moderne

Projet actif

Maintenu par la communauté avec plusieurs dizaines de milliers de téléchargements hebdomadaires sur npm

Compatibilités UI — Formly

Formly

Bootstrap

Material2

Ionic

PrimeNG

Kendo

NG-ZORRO

⚙️ Principe de fonctionnement

🧾 JSON

Configuration décrivant la structure des champs, leurs validations, conditions d’affichage et interactions.

➡️

Formly

Interprète la configuration pour créer automatiquement les composants de formulaire Angular.

➡️

🧠 Reactive Form

Liaison automatique entre les champs du formulaire et le modèle de données, avec validation intégrée.

“Définir le quoi plutôt que le comment.”

🧩 Exemple simple : champ texte


fields: FormlyFieldConfig[] = [
  {
    key: 'firstName',
    type: 'input',
    props: {
      label: 'Prénom',
      required: true,
      minLength: 2,
    },
    validation: {
      messages: {
        required: 'Le prénom est obligatoire',
        minlength: 'Le prénom doit contenir au moins 2 caractères',
      },
    },
  },
];

➡️ Ce bloc suffit à générer un champ réactif complet, avec validation, label, et messages d’erreur automatiques.

🧩 Exemple avancé : champ conditionnel


fields: FormlyFieldConfig[] = [
  {
    key: 'isCompany',
    type: 'checkbox',
    props: {
      label: 'Est-ce une société ?',
    },
  },
  {
    key: 'companyName',
    type: 'input',
    props: {
      label: 'Nom de la société',
      required: true,
    },
    hide: '!model.isCompany',
  },
];

➡️ Le champ Nom de la société n’apparaît que si la case Est-ce une société ? est cochée. Formly gère automatiquement l’affichage conditionnel et les validations dynamiques.

🧩 Exemple sans formly


this.form = this.fb.group({
  isCompany: [false],
  companyName: [''],
});

this.form.get('isCompany')?.valueChanges.subscribe((isCompany) => {
  const companyNameControl = this.form.get('companyName');
  if (isCompany) {
    companyNameControl?.setValidators([Validators.required]);
  } else {
    companyNameControl?.clearValidators();
    companyNameControl?.setValue('');
  }
  companyNameControl?.updateValueAndValidity();
 });

➡️ Le champ Nom de la société n’apparaît que si la case Est-ce une société ? est cochée. Ici, l’affichage conditionnel et la validation sont gérés manuellement via les Reactive Forms d’Angular (avec un *ngIf et des Validators dynamiques).

🚀 Aller plus loin avec Formly

Formly offre des outils puissants pour les cas d’usage les plus complexes. Voici quelques pistes à explorer pour concevoir des formulaires intelligents et modulaires :

🧠 1. expressionProperties

Liez dynamiquement des propriétés comme disabled, label ou class à l’état du modèle. C’est le cœur de la réactivité dans Formly.


'props.disabled': '!model.text',
'props.placeholder': 'model.user'

🧩 2. Types de champs personnalisés

Créez vos propres composants de champ (ex : un <app-color-picker>) et intégrez-les à Formly pour les réutiliser dans tous vos formulaires.

🧱 3. Wrappers de champ

Factorisez le HTML commun (labels, grilles, tooltips, icônes) autour de vos champs pour un code 100% DRY (Don’t Repeat Yourself).

✅ 4. Validations avancées

Implémentez des validateurs personnalisés, y compris asynchrones, pour vérifier des données côté serveur (ex : email unique).

💡 En combinant ces fonctionnalités, vos formulaires deviennent vraiment dynamiques, évolutifs et maintenables.

Avantages & Limites de Formly

Formly simplifie la création de formulaires Angular : moins de code, maintenance simplifiée et réutilisation maximale. Voici un aperçu clair de ses points forts et des quelques limites à connaître.

✅ Avantages de Formly

🧩 Configuration déclarative : les changements de champs et validations sont gérés par Formly, sans code supplémentaire
⚡ Ajout ou modification de champs très simple via la configuration
📍 Règles et validations centralisées, lisibles et testables
♻️ Réutilisation facile des types de champs, wrappers et validators entre projets
🌍 Support multi-UI : Material, Bootstrap, PrimeNG, Ionic…
⏱ Time-to-market réduit : moins de code à maintenir et modifier

⚠️ Limites de Formly

💻 Courbe d’apprentissage initiale pour comprendre la configuration JSON et les expressions dynamiques
🧩 Pour des formulaires très simples, Formly peut sembler “overkill”
📚 Documentation complète mais parfois complexe pour les cas avancés (wrappers, field types custom)
⚙️ Personnalisation complexe des comportements très spécifiques peut nécessiter du code supplémentaire

Questions ?

Pourquoi Formly est-il si peu connu alors qu’il résout autant de problèmes de maintenabilité ?
Pourquoi on continue à dupliquer des composants de formulaire quand Formly fait ça en 3 lignes ?
Est-ce que c’est normal de devoir inspecter 5 fichiers pour comprendre pourquoi un champ ne s’affiche pas ?
Et si le vrai luxe, c’était de pouvoir lire un formulaire comme un JSON et comprendre instantanément ce qu’il fait ?