Error handling in leptos
Check input is number and is less than 20
Using thiserror crate for error handling
#![allow(unused)] fn main() { use leptos::*; use serde::{Deserialize, Serialize}; use thiserror::Error; #[derive(Error, Debug, Clone, Deserialize, Serialize)] pub enum NumberError { #[error("Number getter than 20")] NumberGreater20, #[error("Error parsing to number: `{0}`")] ParseIntError(String), } #[component] pub fn NumericInput() -> impl IntoView { let (value, set_value) = create_signal(Ok(0)); let on_input = move |ev| { let result_value = event_target_value(&ev).parse::<i32>(); let result = match result_value { Ok(parsed_value) => { if parsed_value > 20 { Err(NumberError::NumberGreater20) } else { Ok(parsed_value) } } Err(value) => Err(NumberError::ParseIntError(value.to_string())), }; set_value(result) }; view! { <h1>"Error Handling"</h1> <label> "Type a number less than than 20 (or something that's not a number!)" <input type="number" on:input=on_input/> <ErrorBoundary // the fallback receives a signal containing current errors fallback=|errors| view! { <div class="error"> <p>" Errors: "</p> // we can render a list of errors as strings, if we'd like <ul> {move || errors.get() .into_iter() .map(|(_, e)| view! { <li>{e.to_string()}</li>}) .collect_view() } </ul> </div> } > <p>"You entered " <strong>{value}</strong></p> // If you don't want to display the value: // The way that ErrorBoundary works is by detecting whether the Err(_) branch of a result is rendered, // so something does have to be displayed. // However, it doesn't necessarily need to be value — you can map the original to a Result<(), E> for example: // {move || value.get().map(|_| ())} </ErrorBoundary> </label> } } }