# 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:

```sh
npm install @formerie/angular @formerie/client
```

pnpm:

```sh
pnpm add @formerie/angular @formerie/client
```

Yarn:

```sh
yarn add @formerie/angular @formerie/client
```

Bun:

```sh
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.

```ts
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](https://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](/fr/guides/troubleshooting/).

## Aller plus loin

### Votre propre nom d’hôte

`FormerieService` est fourni à la racine, alors il n’exige aucune configuration. Pour soumettre à un nom d’hôte que vous avez [connecté](/fr/guides/custom-domains/), donnez
son adresse au service avec `FORMERIE_CLIENT_CONFIG`, dans les `providers` que vous passez à `bootstrapApplication`, et utilisez la
cible `{ branded: true, form: "contact" }` :

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

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

## À lire ensuite

- [Recettes](/fr/guides/recipes/) : demandes de soumission, sondages et acheminement par sujet
- [Afficher les erreurs de champ et plus encore](/fr/guides/framework-entry-points/#aller-plus-loin)
- [SDK JavaScript](/fr/guides/javascript-sdk/) et [API](/fr/guides/api-reference/) : la référence complète