Function ActionForm

pub fn ActionForm<ServFn, OutputProtocol>(
    props: ActionFormProps<ServFn, OutputProtocol>,
) -> impl IntoView
where
    ServFn: DeserializeOwned + ServerFn<Protocol = Http<PostUrl, OutputProtocol>> + Clone + Send + Sync + 'static,
    <<<ServFn as ServerFn>::Client as Client<<ServFn as ServerFn>::Error>>::Request as ClientReq<<ServFn as ServerFn>::Error>>::FormData: From<FormData>,
    <ServFn as ServerFn>::Output: Send + Sync + 'static,
    <ServFn as ServerFn>::Error: Send + Sync + 'static,
    <ServFn as ServerFn>::Client: Client<<ServFn as ServerFn>::Error>,

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.

use leptos::form::ActionForm;

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

#[component]
fn ComplexInput() -> impl IntoView {
    let submit = ServerAction::<VeryImportantFn>::new();

    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: ServerAction<ServFn>
  • The action from which to build the form.
• children: Children
  • Component children; should include the HTML of the form elements.

Optional Props

• node_ref: NodeRef<Form>
  • A NodeRef in which the <form> element should be stored.