Démarrage rapide Angular

Ajoutez un formulaire de contact fonctionnel à votre application Angular. Vous écrivez le formulaire, et Formerie le vérifie, le conserve et vous l’envoie par courriel.

Installer

npm install @formerie/angular @formerie/client

pnpm add @formerie/angular @formerie/client

yarn add @formerie/angular @formerie/client

bun add @formerie/angular @formerie/client

Les paquets Formerie sont en alpha, donc leurs API peuvent encore changer d’une version à l’autre.

Ajouter le formulaire

Enregistrez ce fichier sous contact.component.ts, un composant autonome. Il exige Angular 17 ou plus récent.

import { Component, inject, signal } from "@angular/core";
import { FormerieService } from "@formerie/angular";
import type { SubmitResponse } from "@formerie/client";

@Component({
  selector: "app-contact",
  standalone: true,
  template: `
    <form (submit)="submit($event)">
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required></textarea>
      <button [disabled]="submitting()">Send</button>
      @if (result(); as current) {
        <p>{{ current.ok ? "Thanks!" : current.error.message }}</p>
      }
    </form>
  `,
})
export class ContactComponent {
  private readonly formerie = inject(FormerieService);

  readonly submitting = signal(false);
  readonly result = signal<SubmitResponse | null>(null);

  async submit(event: Event) {
    event.preventDefault();
    this.submitting.set(true);
    this.result.set(
      await this.formerie.submit(
        { workspace: "acme", form: "contact" },
        { fields: Object.fromEntries(new FormData(event.target as HTMLFormElement)) },
      ),
    );
    this.submitting.set(false);
  }
}

Le name de chaque champ de saisie correspond au champ qu’il remplit dans Formerie.

Configurer le formulaire dans l’application

1. Ouvrez app.formerie.com et créez un formulaire nommé Contact. Il vient avec les champs de nom, de courriel et de message que ce code envoie.
2. Dans l’onglet Livraison, ajoutez votre adresse courriel, puis choisissez Enregistrer la livraison. Confirmez le courriel que Formerie vous envoie.
3. Dans l’onglet Publication, choisissez API seulement et ajoutez l’adresse qu’affiche votre serveur de développement, comme http://localhost:4200, sous Adresses de vos sites. localhost et 127.0.0.1 comptent comme deux adresses différentes. Ajoutez l’adresse de votre site en ligne de la même façon au moment de le déployer.
4. Choisissez Publier le formulaire.
5. Dans le code ci-dessus, remplacez acme par l’identifiant d’espace de travail affiché dans l’onglet Publication.

Vérifier que c’est arrivé

Lancez votre application, remplissez le formulaire et envoyez-le. « Thanks! » s’affiche dans la page, un texte que vous pouvez changer. Dans l’application Formerie, votre réponse apparaît sous Soumissions, et son courriel sous Livraisons.

Vous voyez une erreur CORS ou NETWORK_ERROR? L’adresse de votre site n’est pas encore dans l’onglet Publication, ou vous n’avez pas republié depuis que vous l’avez ajoutée. Consultez Dépannage.

Aller plus loin

Votre propre nom d’hôte

Pour soumettre à un nom d’hôte que vous avez connecté, donnez son adresse au service avec FORMERIE_CLIENT_CONFIG :

import { FORMERIE_CLIENT_CONFIG } from "@formerie/angular";

export const providers = [
  { provide: FORMERIE_CLIENT_CONFIG, useValue: { endpoint: "https://forms.example.com" } },
];

À lire ensuite

• Recettes : demandes de soumission, sondages et acheminement par sujet
• Afficher les erreurs de champ et plus encore
• SDK JavaScript et API : la référence complète