parsed_values from FormEvent not found

[MFJoyBoy]

i tried to follow examples/07-fullstack/login_form.rs when i use the following code:

use crate::components::{EmailInput, PasswordInput, SubmitButton};
use dioxus::prelude::*;
use models::EmailAddress;
use serde::{Deserialize, Serialize};

#[component]
pub fn SignInForm() -> Element {
    let sing_in_action = use_action(server::api::users::sign_in);
    let form_submit = move |event: FormEvent| async move {
        event.prevent_default();
        let values: LoginData = event.parsed_values().unwrap();
    };
    rsx! {
        form {
            onsubmit: form_submit,
            EmailInput { name: "email", class: "" }
            PasswordInput { name: "password", class: "" }
            SubmitButton { text: "Submit", class: "" }
        }
    }
}

#[derive(Deserialize, Serialize, Debug, Clone)]
pub struct LoginData {
    pub email: EmailAddress,
    pub password: String,
}

i get this error:

12:21:33 [cargo] error[E0599]: no method named parsed_values found for struct dioxus::prelude::Event<FormData> in the current scope --> src/pages/user_account/sub_pages/sign_in/components/sign_in_form.rs:14:39 | 14 | let values: LoginData = event.parsed_values().unwrap(); | ^^^^^^^^^^^^^ method not found in dioxus::prelude::Event<FormData>

[jkelleyrtp]

.parsed_values() is only available when dioxus-html has the "serialize" feature enabled. Are you importing the dioxus workspace crates in an unusual manner? Just using dioxus = { version = "0.7.0-rc.1", features = ["..." ] } should be enough.

[MFJoyBoy]

this is my current config: dioxus = { workspace = true, features = ["router", "fullstack", "logger"] }

[MFJoyBoy]

i do see parsed_values in auto-complete options, but when i use it i get that error

[MFJoyBoy]

when i change my config to:

dioxus = { workspace = true, features = ["router", "fullstack", "logger"] } dioxus-html = { version = "0.7.0-rc.1", features = ["serialize"] }

it works so i need to have dependency to dioxus-htlm

[LuckyTurtleDev]

hi the same issue. on stable 0.7.1. Take some time to figure out (ide was happy but compilation failed) This can easily produce with an adjusted minimal jumpstat example:

// The dioxus prelude contains a ton of common items used in dioxus apps. It's a good idea to import wherever you
// need dioxus
use dioxus::prelude::*;
use serde::{Deserialize, Serialize};


/// Define a components module that contains all shared components for our app.
mod components;

// We can import assets in dioxus with the `asset!` macro. This macro takes a path to an asset relative to the crate root.
// The macro returns an `Asset` type that will display as the path to the asset in the browser or a local path in desktop bundles.
const FAVICON: Asset = asset!("/assets/favicon.ico");
// The asset macro also minifies some assets like CSS and JS to make bundled smaller
const MAIN_CSS: Asset = asset!("/assets/styling/main.css");

fn main() {
    // The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature
    // you have enabled
    dioxus::launch(App);
}

#[derive(Deserialize, Serialize)]
pub struct LoginForm {
    username: String,
    password: String,
}

/// App is the main component of our app. Components are the building blocks of dioxus apps. Each component is a function
/// that takes some props and returns an Element. In this case, App takes no props because it is the root of our app.
///
/// Components should be annotated with `#[component]` to support props, better error messages, and autocomplete
#[component]
fn App() -> Element {
    // The `rsx!` macro lets us define HTML inside of rust. It expands to an Element with all of our HTML inside.
    rsx! {
        form {
            onsubmit: move |evt: FormEvent| async move {
            // Prevent the browser from navigating away.
            evt.prevent_default();

            // Extract the form values into our `LoginForm` struct. The `.parsed_values` method
            // is provided by Dioxus and works with any form element that has `name` attributes.
            let values: LoginForm = evt.parsed_values().unwrap();
        },
        }

    }
}

[tv42]

The errors that come from getting this wrong are horribly confusing because nothing in the docs surfaces the #[cfg(feature = "serialize")] part.

You'll go through a checklist, parsed_values needs where T: DeserializeOwned, your own type has #[derive(serde::Deserialize)] happily right there, and nothing makes sense.

At the very least please mention the feature in the docs for parsed_values, and explain how most users will need to add a whole new dependency they otherwise didn't need (maybe the dioxus crate should expose a feature that it passes on?).