Angular avec les analogjs forment des actions

Utilisez des actions de forme en angulaire avec des analogjs pour la soumission, la validation et la gestion de l’état rationalisées.

Tous les grands cadres de méta ont des actions de forme, et maintenant, Angular aussi! L’amélioration progressive des actions de forme permet aux formulaires de fonctionner de manière fiable avec HTML de base pour tous les utilisateurs tout en ajoutant des fonctionnalités avancées telles que la validation côté client et l’interactivité dynamique pour ceux qui ont des navigateurs modernes et une prise en charge JavaScript.

TL; Dr

Les actions de formulaire vous permettent de gérer les soumissions de formulaire au serveur de manière structurée en angulaire. La validation et la gestion de l’état sont simples et vous n’avez qu’à ajouter un fichier serveur et à lier quelques événements au composant analogique client dans Angular. La gestion de la soumission du formulaire au serveur est un jeu d’enfant.

Composant de fichier unique (SFC)

J’ai traduit le Actions du serveur de formulaire analogique exemple pour utiliser le .analog ou .ag Extensions de fichiers. Cela vous permet de créer un composant de fichier unique, similaire à Vue ou Svelte. Il se compile comme par magie vers une composante angulaire ordinaire.

Activer

Assurez-vous que l’indicateur expérimental est activé.

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    target: ['es2020'],
  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog({
      ssr: false,
      static: false,
      prerender: {
        routes: [],
      },
      // this should be enabled <-----
      vite: { experimental: { supportAnalogFormat: true } },
      nitro: {
        preset: 'vercel-edge'
      }
    }),
  ],
}));

Répertoire des pages

Le pages Le répertoire fonctionne comme le routeur basé sur des fichiers. C’est similaire à NextJS app répertoire ou sveltekit routes annuaire.

Créer le fichier serveur

Dans Analog, vous devez avoir vos itinéraires dans le pages annuaire. Si vous souhaitez ajouter une action de serveur, créez un fichier avec le même nom que .server.ts.

Bulletin

Notre composante de newsletter sera newsletter.server.ts.

import {
    type PageServerAction,
    redirect,
    json,
    fail,
} from '@analogjs/router/server/actions';
import { readFormData } from 'h3';

export async function action({ event }: PageServerAction) {
    const body = await readFormData(event);
    const email = body.get('email');

    if (email instanceof File) {
        return fail(422, { email: 'Invalid type' });
    }

    if (!email) {
        return fail(422, { email: 'Email is required' });
    }

    if (email.length < 10) {
        return redirect("https://www.telerik.com/");
    }

    return json({ type: 'success' });
}

Nouvelles fonctions

• readFormData – une fonction asynchrone pour obtenir les données de formulaire de l’action du formulaire, comme type FormData
• fail – renvoiera une erreur et appellera le onError() fonction sur le frontend
• redirect – enverra une demande de redirection vers le frontend
• json – renvoiera les valeurs au frontend et appelez le onSuccess() fonction

C’est beaucoup plus simple que Svelte, qu’il imite étroitement.

Maquillage SFC analogique

Les fichiers analogiques peuvent éliminer les décorateurs impairs en dactylographie et simplifier les choses.

<script lang="ts">
  // the JS code here
</script>

<template>
  // the angular template
</template>

<style>
  // css if you don't use Tailwind
</style>

Angular a beaucoup de passe-partout, et ce changement rend à nouveau l’écriture dans l’angulaire productif.

Créer l’interaction client

Nous devons nommer notre fichier client newsletter.page.ag Si nous voulons utiliser des SFC analogiques avec le routeur de page.

<script lang="ts">
  import { signal } from '@angular/core';

  import { FormAction } from '@analogjs/router';

  defineMetadata({
    imports: [FormAction]
  });

  type FormErrors =
    | {
      email?: string;
    }
    | undefined;
  const signedUp = signal(false);
  const errors = signal<FormErrors>(undefined);

  function onSuccess() {
    signedUp.set(true);
  }

  function onError(result: FormErrors) {
    errors.set(result);
  }
</script>

<template>
  <section class="flex flex-col gap-5">
    <h3 class="text-2xl">Newsletter Signup</h3>

  @if (!signedUp()) {
    <form method="post" (onSuccess)="onSuccess()" (onError)="onError($event)" (onStateChange)="errors.set(undefined)">
      <div class="flex gap-5 items-center">
        <label for="email"> Email </label>
        <input class="border p-1 rounded" type="email" name="email" />
        <button class="border bg-blue-800 text-white p-2 rounded" type="submit">Submit</button>
      </div>      
    </form>
    @if( errors()?.email ) {
      <p>{{ errors()?.email }}</p>
    }
  } @else {
    <div>Thanks for signing up!</div>
  }
  </section>
</template>

Importer l’action du formulaire

Nous pouvons utiliser le defineMetadata à l’intérieur des fichiers analogiques.

import { FormAction } from '@analogjs/router';

defineMetadata({
  imports: [FormAction]
});

Régales des événements

Il y a trois événements importants à surveiller.

1. (onSuccess) – est appelé lorsqu’il n’y a pas d’erreur; json() est utilisé dans l’action de la forme
2. (onError) – est appelé lorsqu’il y a une erreur; fail() est appelé dans l’action de forme
3. (onStateChange) – est appelé lorsque l’état de la forme change; c’est bon pour réinitialiser l’état de forme

Si nous transmettons les valeurs du serveur, nous pouvons utiliser $event Pour obtenir les données de l’événement, alias lier l’événement.

Signaux

Nous ne pouvons pas avoir une application angulaire sans utiliser de signaux. Nous pouvons définir notre coutume FormErrors Tapez et définissez les erreurs des liaisons de l’événement.

  type FormErrors =
    | {
      email?: string;
    }
    | undefined;
  const signedUp = signal(false);
  const errors = signal<FormErrors>(undefined);

Erreur

L’erreur elle-même peut être gérée comme nous le souhaitons.

Succès

Le message de réussite est généré sur le client, mais nous pourrions également transmettre un message du serveur si nécessaire.

Verdict?

Les actions de la forme analogique sont incroyablement faciles à utiliser et efficaces. La construction de la même application dans NextJS ou Sveltekit nécessiterait beaucoup plus de passe-partout. Merci, Brandon! Soutenez-le si vous le pouvez.