Function leptos_router::ActionForm

source ·
pub fn ActionForm<ServFn>(props: ActionFormProps<ServFn>) -> impl IntoView
where ServFn: DeserializeOwned + ServerFn<InputEncoding = PostUrl> + 'static, <<ServFn::Client as Client<ServFn::Error>>::Request as ClientReq<ServFn::Error>>::FormData: From<FormData>,
Expand description

Automatically turns a server Action into an HTML form progressively enhanced to use client-side routing.


Note: <ActionForm/> only works with server functions that use the default Url encoding. This is to ensure that <ActionForm/> works correctly both before and after WASM has loaded.

§Complex Inputs

Server function arguments that are structs with nested serializable fields should make use of indexing notation of serde_qs.

#[derive(serde::Serialize, serde::Deserialize, Debug, Clone)]
struct HeftyData {
    first_name: String,
    last_name: String,

fn ComplexInput() -> impl IntoView {
    let submit = Action::<VeryImportantFn, _>::server();

    view! {
      <ActionForm action=submit>
        <input type="text" name="hefty_arg[first_name]" value="leptos"/>
        <input type="submit"/>

async fn very_important_fn(
    hefty_arg: HeftyData,
) -> Result<(), ServerFnError> {
    assert_eq!(hefty_arg.first_name.as_str(), "leptos");
    assert_eq!(hefty_arg.last_name.as_str(), "closures-everywhere");

§Required Props

  • action: [Action<ServFn, Result<ServFn::Output, ServerFnError<ServFn::Error>>>]
  • children: Children
    • Component children; should include the HTML of the form elements.

§Optional Props

  • class: impl Into<AttributeValue>
    • Sets the class attribute on the underlying <form> tag, making it easier to style.
  • node_ref: [NodeRef<html::Form>]
    • A [NodeRef] in which the <form> element should be stored.
  • attributes: [Vec<(&'static str, Attribute)>]
    • Arbitrary attributes to add to the <form>