SusFormField

带标签的字段包装器 —— 围绕输入子项提供必填 / 校验规则 / 错误文本。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Label	Prop<string>	""	v-model
FieldName	Prop<string>	""	v-model
ErrorProp	Prop<string>	""	v-model
Required	Prop<bool>	false	v-model
RequiredMessage	Prop<string>	"This field is required"	v-model
Disabled	Prop<bool>	false	v-model
Model	Prop<object>	null	v-model
Row	Prop<bool>	false	v-model

插槽

名称
（默认）

事件

没有公开事件。

样式钩子

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

• sus-form-field
• sus-form-field__error
• sus-form-field__label
• sus-form-field--dirty
• sus-form-field--disabled
• sus-form-field--error
• sus-form-field--required
• sus-form-field--row

用法

<template>
  <sus:SusFormField Label="Hero name"
                    FieldName="name"
                    :Required="Required.Value"
                    RequiredMessage="Enter a name"
                    :ErrorProp="Error.Value"
                    :Model="Value.Value"
                    :Disabled="Disabled.Value">
    <sus:SusTextfield Placeholder="Type a name"
                      Variant="outlined"
                      :Model="Value.Value"
                      @change="OnChange" />
  </sus:SusFormField>
</template>

<script>
public Prop<string> Value = new("");
public Prop<string> Error = new("");
public Prop<bool> Required = new(true);
public Prop<bool> Disabled = new(false);
void OnChange(string value) { Value.Value = value; }
</script>

var field = new SusFormField();
field.Label.Value = "Hero name";
field.FieldName.Value = "name";
field.Required.Value = true;
field.RequiredMessage.Value = "Enter a name";
field.Rules.Value = new List<Func<object, string>>
{
    v =>
    {
        var s = v as string;
        if (string.IsNullOrWhiteSpace(s)) return "Enter a name";
        if (s.Length < 2) return "At least 2 characters";
        return null;
    },
};

var input = new SusTextfield();
input.Placeholder.Value = "Type a name";
input.Variant.Value = "outlined";
input.Model.Changed += (_, val) => field.Model.Value = val;
field.Add(input);

备注

• 嵌套在 SusForm 下，使控制器能按 FieldName（回退到 Label）收集 / 校验。
• SetError(string) 注入服务端消息（绕过本地校验规则）。
• 保持输入元素的 model 与 FormField.Model 同步，以确保校验正常工作。