Struct ActionFormProps

pub struct ActionFormProps<ServFn, OutputProtocol>
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>,
{
    pub action: ServerAction<ServFn>,
    pub node_ref: Option<NodeRef<Form>>,
    pub children: Box<dyn FnOnce() -> AnyView + Send>,
}

Props for the ActionForm component.

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.

Fields

action: ServerAction<ServFn>

The action from which to build the form.

node_ref: Option<NodeRef<Form>>

A NodeRef in which the <form> element should be stored.

children: Box<dyn FnOnce() -> AnyView + Send>

Component children; should include the HTML of the form elements.

Implementations

impl<ServFn, OutputProtocol> ActionFormProps<ServFn, OutputProtocol>

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

pub fn builder() -> ActionFormPropsBuilder<ServFn, OutputProtocol>

Create a builder for building ActionFormProps. On the builder, call .action(...), .node_ref(...)(optional), .children(...) to set the values of the fields. Finally, call .build() to create the instance of ActionFormProps.

Trait Implementations

impl<ServFn, OutputProtocol> Props for ActionFormProps<ServFn, OutputProtocol>

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

type Builder = ActionFormPropsBuilder<ServFn, OutputProtocol>

fn builder() -> <ActionFormProps<ServFn, OutputProtocol> as Props>::Builder