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.

§Encoding

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,
}

#[component]
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="text"
          name="hefty_arg[last_name]"
          value="closures-everywhere"
        />
        <input type="submit"/>
      </ActionForm>
    }
}

#[server]
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");
    Ok(())
}

§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>