Clearable form creation

[amfaber]

Hi!

I'm new to Leptos and trying to create a submission form. I am running into a problem where I want to define the form itself as an HtmlElement, and the function that needs to run when clicking submit, but each of them is dependent on the other, making it impossible to define. Here's a small example to show what I mean.

let on_submit = move |ev: SubmitEvent|{
        // aggregate information from the form with signals
       form.reset();
};

let form = view!{cx,
    <form class="column" on:submit=on_submit>
       {fields} //fields is a Vec<impl IntoView>
       <button type="submit">"Submit"</button>
    </form>
};

The form requires the closure to be defined, and because the closure wants to modify the component itself, the closure needs the form to be defined. What is a reasonable way to deal with this problem?
Am I missing something major, or approaching this in the the wrong way somehow? How should I define a clearable form?

I am generally coming to Leptos from the Rust side of things - frontend is new and still a bit confusing to me.

Thanks a lot for the help!

[gbj]

If I understand correctly, the question here is basically "How do I get access to the HtmlFormElement from inside on_submit?"

The simplest way to do this is to use ev.target() and cast the type of it from web_sys::EventTarget to web_sys::HtmlFormElement (using the wasm_bindgen::JsCast trait)

let on_submit = move |ev: SubmitEvent|{
  let form = ev.target().and_then(|target| target.dyn_into::<HtmlFormElement>());
  if let Some(form) = form {
    // aggregate information from the form with signals
    form.reset();
  } else {
    leptos::error!("huh?");
  }
};

Another way to do this would be to use let form_ref = create_node_ref::<html::Form>(cx) to hold a reference to the form, and load it using <form node_ref=form_ref. See NodeRef docs for examples.

[amfaber]

That's exactly right, thank you!