Checkbox in ActionForm with server function argument that is a struct

[NCura]

Hello!

In the Leptos Book there is an example for the ActionForm when the server function argument is a struct with nested serializable fields.

How can I add a checkbox? I've tried adding a bool inside the struct and a checkbox input field in the form:

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

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

    view! {
      <ActionForm action=submit>
        <input type="checkbox" name="hefty_arg[completed]"/>
        <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>
    }
}

If I try submitting with the checkbox unchecked, I'm getting this error: Error converting form field into server function arguments: Deserialization(Custom("missing field 'completed'")).

If I try submitting with the checkbox checked, I'm getting this error instead: Error converting form field into server function arguments: Deserialization(Custom("provided string was not 'true' or 'false'")).

Does anyone have an idea of how to integrate checkbox in the form? I could then make a PR to the leptos book so that there is an example there for other people in the future.

Thanks

[NCura]

For now, my best approach to solving this problem is to create a hidden text input and have the checkbox input modify the value of this hidden text input to store either "true" or "false":

#[component]
fn ComplexInput() -> impl IntoView {
    let submit = Action::<VeryImportantFn, _>::server();
    let (checkbox_value, set_checkbox_value) = create_signal("false");

    view! {
        <ActionForm action=submit>
            <input
                type="checkbox"
                on:input=move |ev| {
                    let is_checked = event_target_checked(&ev);
                    let new_value = if is_checked { "true" } else { "false" };
                    set_checkbox_value.set(new_value);
                }
            />

            <input type="text" name="hefty_arg[completed]" hidden value=checkbox_value/>
            <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>
    }
}

If anyone has a better solution, I would gladly try it.

[gbj]

HTML checkboxes don't send a boolean, they send either nothing or their value attribute. You can use #[serde(default)] to cover the "send nothing" case, and either use true as the value or receive it as a string instead of a bool and parse it yourself.

[NCura]

Adding the default case and the value="true" solved the problem in a cleaner way. Thanks for the suggestion! Here’s a snippet for reference:

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

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

    view! {
        <ActionForm action=submit>
            <input type="checkbox" name="hefty_arg[completed]" value="true"/>
            <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>
    }
}