メインコンテンツへスキップ

$app/forms

import { function applyAction<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: import("@sveltejs/kit").ActionResult<Success, Failure>): Promise<void>

This action updates the form property of the current page with the given data and updates $page.status. In case of an error, it redirects to the nearest error page.

applyAction
, function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import("@sveltejs/kit").ActionResult<Success, Failure>

Use this function to deserialize the response from a form submission. Usage:

import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
	method: 'POST',
	body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}
deserialize
,
function enhance<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(form_element: HTMLFormElement, submit?: import("@sveltejs/kit").SubmitFunction<Success, Failure>): {
    destroy(): void;
}

This action enhances a &#x3C;form> element that otherwise would work without JavaScript.

The submit function is called upon submission with the given FormData and the action that should be triggered. If cancel is called, the form will not be submitted. You can use the abort controller to cancel the submission in case another one starts. If a function is returned, that function is called with the response from the server. If nothing is returned, the fallback will be used.

If this function or its return value isn’t set, it

  • falls back to updating the form prop with the returned data if the action is on the same page as the form
  • updates $page.status
  • resets the &#x3C;form> element and invalidates all data in case of successful submission with no redirect response
  • redirects in case of a redirect response
  • redirects to the nearest error page in case of an unexpected error

If you provide a custom function with a callback and want to use the default behavior, invoke update in your callback.

@paramform_element The form element
@paramsubmit Submit callback
enhance
} from '$app/forms';

applyAction

このアクションは現在のページのformプロパティを所定のデータで更新し、$page.statusを更新します。エラーが発生した場合、最も近いエラーページにリダイレクトします。

function applyAction<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: import('@sveltejs/kit').ActionResult<
		Success,
		Failure
	>
): Promise<void>;

deserialize

この関数は、フォーム送信からの応答を逆シリアル化するのに使用します。使用方法

import { function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import("@sveltejs/kit").ActionResult<Success, Failure>

Use this function to deserialize the response from a form submission. Usage:

import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
	method: 'POST',
	body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}
deserialize
} from '$app/forms';
async function function handleSubmit(event: any): Promise<void>handleSubmit(event: anyevent) { const const response: Responseresponse = await function fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response> (+1 overload)fetch('/form?/action', { RequestInit.method?: string | undefined

A string to set request’s method.

method
: 'POST',
RequestInit.body?: BodyInit | null | undefined

A BodyInit object or null to set request’s body.

body
: new var FormData: new (form?: HTMLFormElement, submitter?: HTMLElement | null) => FormData

Provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.

MDN Reference

FormData
(event: anyevent.target)
}); const const result: ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>result = deserialize<Record<string, unknown> | undefined, Record<string, unknown> | undefined>(result: string): ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>

Use this function to deserialize the response from a form submission. Usage:

import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
	method: 'POST',
	body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}
deserialize
(await const response: Responseresponse.Body.text(): Promise<string>text());
// ... }
function deserialize<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;

enhance

このアクションは、それ以外の場合はJavaScriptなしで機能する<form>要素を強化します。

submit関数は、所定のFormDataとトリガーされるべきactionを使用して送信時に呼び出されます。cancelが呼び出されると、フォームは送信されません。送信が別の送信により開始された場合、abort controllerを使用して送信をキャンセルできます。関数が返される場合、その関数はサーバーからの応答と共に呼び出されます。何も返されない場合、フォールバックが使用されます。

この関数またはその戻り値が設定されていない場合、

  • アクションがフォームと同じページにある場合、formプロパティを返されたデータで更新
  • $page.statusを更新
  • リダイレクト応答がない場合、<form>要素をリセットし、すべてのデータを無効にする
  • リダイレクト応答がある場合にリダイレクト
  • 予期しないエラーの場合、最も近いエラーページにリダイレクト

コールバックでカスタム関数を提供し、既定の動作を使用する場合は、コールバックでupdateを呼び出します。

function enhance<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	form_element: HTMLFormElement,
	submit?: import('@sveltejs/kit').SubmitFunction<
		Success,
		Failure
	>
): {
	destroy(): void;
};

このページをGitHubで編集