Yew Form

将 MVC 带入 Yew！一组对 Yew 组件进行建模和验证以映射到 HTML 表单的略有意见的集合。

在线演示

支持

• 结构体的双向绑定（支持嵌套结构体）
• 验证（使用 Keats Validator）
• 目前仅支持 String 和 bool 字段。更多即将到来

用法

Cargo.toml

[dependencies]
validator = "0.10"
validator_derive = "0.10"
yew = "0.12"
yew_form = "0.1"
yew_form_derive = "0.1.4"

main.rs

#[macro_use]
extern crate validator_derive;
extern crate yew_form;
#[macro_use]
extern crate yew_form_derive;

示例

考虑以下模型

#[derive(Model, Validate, PartialEq, Clone)]
struct Address {
    #[validate(length(min = 1, message="Street is required"))]
    street: String,
    #[validate(length(min = 1, message="City name is required"))]
    city: String,
    #[validate(regex(path="PROVINCE_RE", message="Enter 2 digit province code"))]
    province: String,
    postal_code: String,
    country: String,
}

#[derive(Model, Validate, PartialEq, Clone)]
struct Registration {
    #[validate(length(min = 1, message="First name is required"))]
    first_name: String,
    #[validate(length(min = 1, message="Last name is required"))]
    last_name: String,
    quantity: u32,
    price: f64,
    #[validate]
    address: Address,
    #[validate(custom = "must_be_true")]
    accept_terms: bool,
}

可以使用以下定义将结构体绑定到 Yew 表单

struct App {
    form: Form<Registration>,
    ...
}

目前，需要如下实例化 Form

fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
    // Create model initial state
    let model = Registration {
        first_name: String::from("J-F"),
        last_name: String::from("Bilodeau"),
        address: Address {
            street: String::new(),
            city: String::from("Ottawa"),
            province: String::from("ONT"),
            postal_code: String::from("K2P 0A4"),
            country: String::new(),
        },
    };

    Self {
        form: Form::new(model),
        ...
    }
    ...

然后可以按照以下方式向表单中添加字段

<Field<Registration> form=&self.form field_name="first_name" oninput=self.link.callback(|_: InputData| AppMessage::Update) />
...
<Field<Registration> form=&self.form field_name="address.street" oninput=self.link.callback(|_: InputData| AppMessage::Update) />
...
<CheckBox<Registration> field_name="accept_terms" form=&self.form />

Field 组件负责在 struct Registration 和 HTML 的 <input> 之间进行双向绑定

当用户编辑表单或程序化时，会自动进行验证。

if self.form.validate() {
    ...
}

待办事项/愿望清单

• 添加文档（进行中）
• 从模型中移除克隆要求
• 为模型添加 derive 以移除对 vec! 字段的依赖
• 使 oninput 可选
• 使 Yew 在 Field 更新时更新视图
• 需要向 Field 添加额外的 HTML 属性
• 移除硬编码的 Bootstrap 样式
• 支持其他类型，如 i32
• 支持 Vec<T>
• 支持 Rust 稳定版

变更日志

0.1.7

• 从代码中移除 #![feature(get_mut_unchecked)] （感谢 L0g4n）

0.1.6

• 移除了不安全的代码
• 在文档中更新了 yew_form 版本

0.1.5

• 更新到 Yew 0.17

0.1.4

• 为 FieldValue 添加了泛型实现，以支持 i32，bool 等...

0.1.3

重大变更

• 添加了 #[derive(Model)]
• 无需手动将字段向量传递给 Form::new()

0.1.2

• 添加了复选框

0.1.1

• 将 Field::oninput 设置为可选

（用 ❤️ 和 Rust 制作）