Convertisseur JSON → Formulaire Angular

Pourquoi cet outil

Créer un formulaire Angular complet (validation, typage, HTML) prend du temps. Ce convertisseur automatise 80% du travail:

• Gagner du temps — De la donnée JSON au formulaire en 2 clics
• Détection automatique — Email, phone, URL, dates = validators appropriés
• 3 approches Angular — Reactive Form, Template Form, FormsSignal
• Code prêt à copier — Pas de configuration, tout est généré
• Accessibilité — Labels + aria-labels générés automatiquement

Types de champs supportés

L'outil détecte automatiquement les types et assigne les validators pertinents:

Comment utiliser (4 étapes)

Étape 1: Préparer le JSON

Créez un objet JSON simple avec le nom du champ et son type:

{
  "firstName": "string",
  "email": "email",
  "phone": "tel",
  "age": "number",
  "subscribe": "boolean",
  "message": "textarea"
}

Étape 2: Coller dans l'outil

Copiez votre JSON et collez-le dans le textarea "Collez votre JSON".

Étape 3: Générer

Cliquez sur le bouton ✨ Générer. L'aperçu du formulaire et tous les codes apparaissent instantanément.

Étape 4: Copier et adapter

Sélectionnez l'approche qui vous plaît (Reactive, Template ou Signal), puis copiez le code avec les boutons 📋 Copier.

Reactive vs Template Form vs Signal

Reactive Form

À privilégier pour: Formulaires complexes, validation dynamique, tests unitaires, programmation réactive.

Le FormGroup est défini en TypeScript, ce qui donne plus de contrôle.

Template Form (NgForm)

À privilégier pour: Formulaires simples, prototypage rapide, moins de code TypeScript.

La logique est directement dans le template HTML avec ngForm.

FormsSignal

À privilégier pour: Angular 17+, gestion d'état réactive avec Signals, performance optimale.

Combine la réactivité des Signals d'Angular avec les formulaires.

FormsSignal (Angular 16+)

FormsSignal (ou Forms avec Signals) est une nouvelle approche qui combine:

• Signals — État réactif granulaire et performant
• Formulaires — Validation, binding, error handling
• Réactivité — Change detection automatique et optimisée

Avantages:

• ✅ Performance optimale (fine-grained reactivity)
• ✅ Moins de RxJS boilerplate
• ✅ État formulaire plus lisible
• ✅ Intégration native avec le nouvel Angular

FormField (Angular 17+ — Signal Forms)

FormField est le composant pour les Signal-based Forms (Signal Forms) en Angular 17+. C'est l'approche la plus moderne pour gérer les formulaires.

Qu'est-ce que Signal Forms (FormField)?

Signal Forms utilise 3 éléments clés:

1. Model Signal — Un `signal` contenant vos données
   const model = signal({ email: '', password: '' })
2. Form Function — Crée le formulaire réactif avec validators
   const form = form(model, (schemaPath) => { ... })
3. FormField Directive — Lie les champs HTML au formulaire
   <input [formField]="form.email" />

Avantages comparés à Reactive Form

• ✅ Moins de boilerplate — Pas besoin de FormBuilder
• ✅ Validators globaux — Définis en une seule fonction
• ✅ API cohérente — Même pattern pour tous les champs
• ✅ Performance optimale — Change detection fine-grained via Signals
• ✅ Accès facile aux erreurs — `form.field().errors()` au lieu de `form.get('field')?.errors`

Syntaxe FormField (Signal Forms)

// 1. Créer un model signal
const model = signal({
  email: '',
  password: ''
});

// 2. Créer le formulaire avec validators
const form = form(model, (schemaPath) => {
  required(schemaPath.email, {message: 'Email requis'});
  email(schemaPath.email, {message: 'Email invalide'});
  required(schemaPath.password, {message: 'Password requis'});
});

// 3. Dans le template
<input [formField]="form.email" type="email" />

// 4. Accéder aux erreurs
form.email().errors()        // Signal<ValidationError[]>
form.email().touched()       // Signal<boolean>
form.email().invalid()       // Signal<boolean>
form.invalid()               // Signal<boolean>

Exemple complet FormField

import { signal } from '@angular/core';
import { form, required, email, minLength } from '@angular/forms/signals';

// Créer le model
const model = signal({
  email: '',
  password: ''
});

// Créer le formulaire avec validators
const loginForm = form(model, (schemaPath) => {
  required(schemaPath.email, {message: 'Email requis'});
  email(schemaPath.email, {message: 'Email invalide'});
  required(schemaPath.password, {message: 'Password requis'});
  minLength(schemaPath.password, 8, {message: 'Min 8 caractères'});
});

// Dans le template:
// <input [formField]="loginForm.email" type="email" />
// <input [formField]="loginForm.password" type="password" />
// @if (loginForm.email().invalid() && loginForm.email().touched()) {
//   @for (error of loginForm.email().errors(); track error) {
//     <div>{{ error.message }}</div>
//   }
// }

Exemples pratiques

Exemple 1: Formulaire inscription

{
  "username": "string",
  "email": "email",
  "password": "string",
  "confirmPassword": "string",
  "terms": "boolean"
}

Exemple 2: Formulaire contact

{
  "name": "string",
  "email": "email",
  "phone": "tel",
  "subject": "string",
  "message": "textarea"
}

Exemple 3: Profil utilisateur

{
  "firstName": "string",
  "lastName": "string",
  "email": "email",
  "phone": "tel",
  "website": "url",
  "birthDate": "date",
  "bio": "textarea",
  "newsletter": "boolean"
}

Exemple 4: Formulaire produit

{
  "productName": "string",
  "price": "number",
  "quantity": "number",
  "description": "textarea",
  "inStock": "boolean",
  "category": "string"
}

Tips & Tricks Angular

🎯 Validation personnalisée

Après copie, vous pouvez ajouter des validators personnalisés:

this.form.get('email')?.addValidators([customEmailValidator]);
this.form.get('password')?.addValidators([strongPasswordValidator]);

🔄 Gestion des erreurs

Pour afficher les erreurs proprement:

<div *ngIf="form.get('email')?.hasError('required')" class="alert alert-danger">
  Email requis
</div>

📝 Prefill / Préremplissage

Pour remplir le formulaire avec des données:

this.form.patchValue({
  firstName: 'Jean',
  email: 'jean@example.com'
});

🎨 Styling Bootstrap

Ajoutez les classes Bootstrap d'erreur:

<input class="form-control"
  [class.is-invalid]="form.get('email')?.invalid && form.get('email')?.touched">

🔐 Sécurité

Utilisez DomSanitizer pour les données dynamiques, validez côté serveur toujours.