Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use_form aka form support #8

Open
rebo opened this issue Mar 9, 2020 · 0 comments
Open

use_form aka form support #8

rebo opened this issue Mar 9, 2020 · 0 comments

Comments

@rebo
Copy link
Owner

rebo commented Mar 9, 2020

Second draft of forms support.

Chuck any struct with serde support in use_form and automatic two-way binding will be set up. via form.bind(key) .

With optional validation and soon nested form support.

The initial draft used form.input(key) to create the full input![] Node<Msg> however this makes it harder to mix in things like custom styles it also meant that a new function had to be created for each input type, therefore form.bind is used to set up the Attr EventHandler and additional class names such as "data-validation-errror" etc.

As before let me know what you think of the api surface.

Simple form:

#[derive(Clone, Validate, Debug, Serialize, Deserialize)]
struct User {
    name: String,
    age: u32,
}

#[topo::nested]
fn form_test() -> Node<Msg> {
    let form = use_form(|| 
        User {
            name: "Amos Burton".to_string(),
            age: 32,
        }
    );

    div![
        input![ form.bind("name")],
        input![ form.bind("age")],
        format!("data: {:#?}", form.get().data),
    ]
}

Form with validaiton:

#[derive(Clone, Validate, Debug, Serialize, Deserialize)]
struct User {
    #[validate(length(min = 1))]
    name: String,
    #[validate(email)]
    email: String,
    #[validate(range(min = 18, max = 39))]
    age: u32,
}

#[topo::nested]
fn form_test() -> Node<Msg> {
    let form = use_form(|| User {
        name: "The Queen".to_string(),
        email: "Buckingham Palace, London, England".to_string(),
        age: 32,
    });

    div![
        input![ form.bind("name")],
        input![ form.bind("email")],
        input![ form.bind("age")],
        format!("data: {:#?}", form.get().data),
        format!("errors: {:#?}", form.get().data.validate()),
    ]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant