form_no_reaction.rs

#[derive(Debug, Default, Validate,Clone)]
struct Form {
    #[validate(length(min = 1))]
    name: String,
    #[validate(length(min = 1))]
    color: String,
    #[validate(range(min = 18, max = 45))]
    age: i32
}


#[atom]
fn form(id:Local) -> Atom<Form> {
    Form {
        name: "".to_string(),
        color: "".to_string(),
        age: 0,
    }
}

fn form_ui<Ms:'static>(id : Local) -> Node<Ms>{
    let data = form(id).get();

    div![
        name_ui( &data.name, move |inp| form(id).update(|f| f.name = inp)),
        color_ui(move |inp| form(id).update(|f| f.color = inp)),
    ]

}

fn name_ui<Ms:'static, F: FnOnce(String)->() +Clone +'static>(value: &String , setter: F ) -> Node<Ms> {
    div![
        label!["Name:"],
        input![
            s().b_color("gray").b_style_solid().b_width(px(2)),
            attrs!{At::Value => value}, 
            input_ev(Ev::Input, move |inp| setter(inp))
        ]
    ]
}

fn color_ui<Ms:'static, F: FnOnce(String)->() +Clone +'static>( setter: F ) -> Node<Ms>{
    div![
        label!["Color:"],
        color_picker(  
            input_ev(Ev::Input, move |inp| setter(inp))
        )
    ]
}

// Actual View
#[topo::nested]
pub fn view() -> Node<Msg> {
    let form_id = Local::new();
    let form_data = form(form_id).get();
    div![
        h1![s().font_weight_v900(), "Form Data"],
        p![format!("name: {}", form_data.name)],
        p![format!("color: {}", form_data.color)],
        h1![s().font_weight_v900(), "Form"],
        form_ui(form_id),
        h1![s().font_weight_v900(), "Errors"],
        pre![format!("{:#?}", form_data.validate())]
   
    ]
}