Erreurs visibles

Les erreurs visibles sont les erreurs que l'on pourra matérialiser dans notre interface tel que des champs de formulaire en erreur. Ici pas de magie, nous allons simplement renvoyer de la donnée représentant un état d'erreur depuis notre action ou loader.

Exercice

1- Créer une nouvelle page avec un formulaire
2- Renvoyer de la donnée en cas d'erreur
3- Afficher un liseré rouge autour du champ en erreur

Guide

💿 Créer une nouvelle page avec un formulaire

Nous allons créer une page de login avec un champ password

Voir une solution

app/routes/_layout.login.tsx
export default function Login() {
  return (
    <div>
      <Form method="post">
        <div>
          <p>Authentification</p>
        </div>
        <label>
          Mot de passe: <input type="password" name="password" />
        </label>

        <button type="submit">Se connecter</button>
      </Form>
    </div>
  );
}

💿 Renvoyer de la donnée en cas d'erreur

Nous allons ajouter une action qui renverra de la donnée représentant l'état de la validation du password. Notre action doit renvoyer une erreur si le mot de passe est différents de devoxx2023

Voir une solution

app/routes/_layout.login.tsx
const LoginRequestSchema = z.object({
  password: z.string().min(1),
});

type FormError = { errors: { username?: string[]; password?: string[] } };
export const action = async ({ request }: ActionArgs) => {
  const formData = Object.fromEntries(await request.formData());
  const parsedResult = LoginRequestSchema.safeParse(formData);
  if (!parsedResult.success) {
    return json<FormError>({
      errors: parsedResult.error.formErrors.fieldErrors,
    });
  }

  const { password } = parsedResult.data;
  if (password !== "devoxx2023") {
    return json<FormError>({ errors: { password: ["Invalid password"] } });
  }

  return json<FormError>({ errors: {} });
};

💿 Afficher un liseré rouge autour du champ en erreur

Nous allons créer une page de login avec un champ password et afficher un message en cas de succès ou d'échec

Voir une solution

app/routes/_layout.login.tsx
export default function Login() {
  const data = useActionData<typeof action>();

  return (
    <div>
      <Form method="post">
        <div>
          <p>Authentification</p>
        </div>
        <label>
          Mot de passe:
          <input
            type="password"
            name="password"
            className={twMerge(
              "border-2",
              data?.errors.password && "border-rose-500"
            )}
          />
        </label>

        <button type="submit">Se connecter</button>
      </Form>

      {data ? (
        <div>
          Resultat :{" "}
          {Object.keys(data.errors).length === 0 ? "succès" : "echec"}
        </div>
      ) : null}
    </div>
  );
}

👏 Nous pouvons maintenant gérer simplement tous les types d'erreurs dans notre application Remix.

Nous allons maintenant découvrir les routes ressource

Erreurs visibles

Guide​

Guide