Skip to main content

$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。如果出现错误,它会重定向到最近的错误页面。

¥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.

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

deserialize

使用此功能反序列化表单提交的响应。用法:

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

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

此操作增强了 <form> 元素,否则该元素无需 JavaScript 即可工作。

¥This action enhances a <form> element that otherwise would work without JavaScript.

提交时使用给定的 FormData 和应触发的 action 调用 submit 函数。如果调用 cancel,则不会提交表单。你可以使用 abort controller 取消提交,以防另一个提交开始。如果返回一个函数,则使用服务器的响应调用该函数。如果没有返回任何内容,将使用后备。

¥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

  • 如果操作与表单位于同一页面上,则回退到使用返回的数据更新 form 属性

    ¥falls back to updating the form prop with the returned data if the action is on the same page as the form

  • 更新 page.status

    ¥updates page.status

  • 在成功提交且没有重定向响应的情况下重置 <form> 元素并使所有数据无效

    ¥resets the <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

如果你提供带有回调的自定义函数并希望使用默认行为,请在回调中调用 update。它接受一个选项对象

¥If you provide a custom function with a callback and want to use the default behavior, invoke update in your callback. It accepts an options object

  • 如果你不希望在成功提交后重置 <form> 值,则选择 reset: false

    ¥reset: false if you don’t want the <form> values to be reset after a successful submission

  • 如果你不希望操作在提交后调用 invalidateAll,则选择 invalidateAll: false

    ¥invalidateAll: false if you don’t want the action to call invalidateAll after submission

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;
};
上一页 下一页