Alpine.js を使用した高度なフォーム

この記事のテキストは、ChatGPT および DeepL Write によって部分的に生成され、弊社によって修正および改訂されました。

Alpine.js を使用したフォームの操作にまだ慣れていない場合は、このトピックに関する最初の記事「Alpine.js を使用した対話型フォーム」で知識を更新してください。

Alpine.js を使用した対話型フォームに関する最初の記事で、フォーム内のサーバー側情報の一般的な表示に加えて、Alpine.js を使用して個々の要素に影響を与えることもできることをすでに示しました。

多くの要望を受けて、このフォローアップ記事でまさにこのトピックを取り上げ、情報と状態を使用して Alpine.js でフォームを検証する方法の例を示すことにしました。

設定

このデモンストレーションでは、Astro ボイラープレートを使用しています。
これについては、以前の記事ですでに詳しく説明しました。

私たちの定型文があなたに合わないとしても、それは問題ではありません。フォームエントリを検証する手順は、Alpine.js を使用するどのプロジェクトでも機能します。

Alpine.js のメソッドの統合

実装のその後の過程で Alpine.js から必要なデータとメソッドにアクセスできるようにするために、これらは最初に宣言され、その後の過程でのエラーを回避します。

フォーム.ts

form() は読み込み状態を制御し、submit() メソッドを介してサーバーから送信された応答を保存します。このメソッドはフォームの送信時に実行されます。

架空の fakeResponse() も含まれており、これは架空のバックエンドから模範的かつ単純化された検証エラーを「受信」します。

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

レスポンスには、各キーと値のペアが入力要素の名前と関連する検証エラーで構成されるエラー オブジェクトが含まれている必要があります。

input.ts

input.ts は、 validate() メソッドを介して入力要素の検証エラーの表示を処理します。このメソッドは、フォームの送信時に表示するデータを再計算するために x-effect 属性を介して統合されています。

export const input = () => ({
  error: null as unknown,

  validate() {
    if (!this.response?.errors?.[this.$el.name]) return (this.error = null);
    this.error = this.response.errors[this.$el.name];
  },
});

グローバル.ts

最後に、Alpine.js に対して宣言されたメソッドがこのステップでインポートされ、必要なスコープにアクセスできるように EventListener alpine:init に登録されます。

import Alpine from "alpinejs";
import { app } from "./alpine/app";
import { form } from "./alpine/form";
import { input } from "./alpine/input";

// Await Alpine.js initialization
document.addEventListener("alpine:init", () => {
  Alpine.data("app", app);
  Alpine.data("form", form);
  Alpine.data("input", input);
});

Alpine.start();

オプションのユーティリティ メソッドの宣言

入力要素の名前をラベルとしても使用できるように、kebab-case で書かれた文字列 (例: "email-address") を分割し、各単語を大文字にするメソッド Capitalize を作成します。

大文字を使用しないことにした場合は、input.astro コンポーネント内の対応する参照を削除する必要があります

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

Astro でのページとコンポーネントの作成

次のステップでは、フォームに必要なページとコンポーネントを作成します。 を定義します。コンポーネントを作成し、フォーム ブロックに統合します。

input.astro

input.astro は要素 を結合します。 <ラベル> 1 つのコンポーネントに含まれており、Alpine コンテキスト入力を介してマップされる検証エラーの表現も含まれています。

---
import {capitalize } from "@/scripts/utilities"

const { 名前, ...props } = Astro.props
---

<div>



<h3>
  
  
  インデックス.アストロ
</h3>

<p>index.astro はフォーム ブロックを表し、事前定義されたコンポーネント <Input /> を使用します。そして、応答オブジェクトからのエラーを表示できるように、そのロジックをフォーム コンテキストで補完します。</p>

<p>コンポーネント <Input />検証エラーの表示を処理する場合、処理中にフォームが複数回送信されるのを防ぐために、個々の入力要素の無効な属性を読み込み状態にバインドします。<br>
</p>

<pre class="brush:php;toolbar:false">---
「@/layouts/root.astro」からルートをインポートします
「@/components/input.astro」から入力をインポート

const メタ = {
  タイトル: 「Alpine.js を使用した高度なフォーム」
}
---

<ルート{メタ}>
  <メイン>
    




<hr>

<h2>
  
  
  TL;DR
</h2>

<p>Alpine.js を使用して、バックエンドからの検証エラーがフォームにどのように動的に表示されるか、および入力要素がブラウザー内の対応するイベントにどのように反応するかを示します。</p>


          

以上がAlpine.js を使用した高度なフォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。