SusFormField

Обёртка поля с label — required / rules / текст ошибки вокруг input-ребёнка.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

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 (иначе fallback на Label).
• SetError(string) подставляет серверное сообщение об ошибке (в обход локальных rules).
• Держите model инпута и FormField.Model синхронизированными для валидации.