SusForm

表单外壳 —— 标题、字段插槽、校验摘要、提交 / 取消，通过 SusFormController 提供加载遮罩。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Controller	Prop<SusFormController>	new()	v-model
Title	Prop<string>	""	v-model
SubmitLabel	Prop<string>	"OK"	v-model

插槽

名称
（默认）

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-form
• sus-form__actions
• sus-form__body
• sus-form__cancel
• sus-form__error-item
• sus-form__errors
• sus-form__errors-title
• sus-form__spinner
• sus-form__submit
• sus-form__title
• sus-form--dirty
• sus-form--disabled
• sus-form--invalid
• sus-form--readonly
• sus-form--submitting

用法

通过 Controller 驱动生命周期：提交后进入 IsSubmitting，直到调用 FinishSubmit / FailSubmit / SetServerErrors。

var ctrl = new SusFormController();
ctrl.OnSubmit += values =>
{
    // async work…
    ctrl.FinishSubmit();
    // or ctrl.SetServerErrors(new Dictionary<string, string> { ["name"] = "Taken" });
    // or ctrl.FailSubmit();
};

var form = new SusForm();
form.Controller.Value = ctrl;
form.Title.Value = "Quick form";
form.SubmitLabel.Value = "OK";

var nameField = new SusFormField();
nameField.Label.Value = "Name";
nameField.FieldName.Value = "name";
nameField.Required.Value = true;
var input = new SusTextfield();
input.Placeholder.Value = "Hero name";
input.Model.Changed += (_, val) => nameField.Model.Value = val;
nameField.Add(input);
form.Add(nameField);

<template>
  <sus:SusForm Title="Quick form"
               SubmitLabel="OK"
               :Controller="FormCtrl.Value">
    <!-- Prefer composing fields in C# (Controller + FormField.Model sync) — see above. -->
  </sus:SusForm>
</template>

<script>
public Prop<SusFormController> FormCtrl = new(new());
</script>

备注

• 与 SusFormField 子项配合使用（会自动注册到控制器）。
• 保持每个字段的 Model 与其输入元素同步（参见 FormField）。
• ShowCancel（字段）用于切换取消按钮；按下时触发 OnCancel。
• 提交期间，表单会显示加载遮罩并禁用提交按钮。