自定义组件里定义Select组件如何触发验证

[javazfj]

Which class is this unit test associated with?

自定义组件里定义Select组件，如何触发验证，官网没找到相应的示例

[bb-auto[bot]]

@javazfj Thank you for reporting. We will give triage later.

[densen2014]

select要验证什么，环境或者代码发一点

[javazfj]

select要验证什么，环境或者代码发一点

https://gitee.com/zfjie/blazor-bb.git
运行
1、输入main
2、左侧选择验证
点提交按钮，第一个表单没有触发验证，第二个表单触发验证

[densen2014]

输入main是啥意思
是这个文件吗

[javazfj]

输入main是啥意思 是这个文件吗

运行项目，浏览器地址/ 后面输入main

[ArgoZhang]

@javazfj 帮忙点一下右上角 star 你这个示例工程最好改一下啊。每次让别人输入 main 太麻烦了

[ArgoZhang]

自定义组件 Student 包裹了 Select 组件

@inherits SingleSelectBase<string>

<Select TValue="string" Items="items" @bind-Value="Value"></Select>

@code {
    private List<SelectedItem> items { get; set; }

    protected override void OnInitialized()
    {
        items = items ?? new();
        items.Add(new SelectedItem("", "空"));
        items.Add(new SelectedItem("A", "A"));
        items.Add(new SelectedItem("B", "B"));
    }
}

组件绑定模型字段为 Name 标记了 Required 与 StringLength 两个验证标签即自动生成两个验证规则

public class Student
{
    [Required]
    public int Id { get; set; }

    [Required(ErrorMessage = "{0} 不可为空")]
    [Display(Name = "姓名")]
    [StringLength(50, MinimumLength = 1, ErrorMessage = "最多50个字符")]
    public string? Name { get; set; }
}

期望值 验证不通过 组件出现红色边框

实际值 验证通过 组件出现绿色边框

原因

自定义组件 Student 绑定属性 Name 内部 Select 并没有 Name 属性，而是 Value 所以无法验证

注意点

1. 如果自定义组件仅包裹组件库提供的组件，这是无意义的，验证逻辑会出问题，正确的做法应该是自定义组件自己要实现验证样式

private string? InputClassString => CssBuilder.Default("form-select form-control")
    .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
    .AddClass($"border-success", IsValid.HasValue && IsValid.Value)
    .AddClass($"border-danger", IsValid.HasValue && !IsValid.Value)
    .AddClass(CssClass).AddClass(ValidCss)
    .Build();

核心样式为 ValidCss

2. SetError 方法
   使用 ComplexForm.SetError('Dummy.Dummy2.Name','数据库中已存在'); 实例方法设置验证不通过提示信息
   参考链接：https://www.blazor.zone/validate-form#ComplexValidation

3. 继承 ValidateBase 组件使用 ValidateRules 参数设置验证规则
   参考链接：https://www.blazor.zone/validate-form#InnerFormLabel