Blazor Server如何为非直接绑定模型的控件设置验证样式

Blazor的EditForm验证系统会给使用@bind-Value绑定模型属性的控件自动添加invalid类，但InputFile不支持直接绑定值，导致验证不通过时控件无法被标记。下面是两种可行的解决办法：

方法一：手动根据验证状态绑定控件样式 #

通过检查模型属性的验证状态，动态给InputFile添加invalid类：

1. 给InputFile的class属性绑定一个计算方法，根据验证结果返回对应样式
2. 触发验证后调用StateHasChanged()更新组件渲染

示例代码：

<EditForm EditContext="@MyEditContext">
    <InputFile id="fileUpload" 
               class="@GetFileInputClass()" 
               accept="@MyModel.AllowedTypes" 
               OnChange="@file_OnChange">
    </InputFile>
</EditForm>

@code {
    private EditContext MyEditContext;
    private MyModel MyModel = new();
    private List<ValidationMessage> _validationMessages = new();

    protected override void OnInitialized()
    {
        MyEditContext = new EditContext(MyModel);
    }

    private void file_OnChange(InputFileChangeEventArgs e)
    {
        MyModel.MyFile = e.File;
        MyEditContext.Validate();
        StateHasChanged();
    }

    private string GetFileInputClass()
    {
        var fieldId = FieldIdentifier.Create(() => MyModel.MyFile);
        var hasErrors = MyEditContext.GetValidationMessages(fieldId).Any();
        return hasErrors ? "form-control invalid" : "form-control";
    }

    // 执行自定义验证的方法
    private void RunValidation()
    {
        _validationMessages.Clear();
        if (MyModel.MyFile == null)
        {
            _validationMessages.Add(() => MyModel.MyFile, "请选择文件");
        }
        MyEditContext.NotifyValidationStateChanged();
        StateHasChanged();
    }
}

方法二：自定义支持绑定的InputFile组件 #

创建一个继承自InputBase<IBrowserFile>的自定义组件，让它支持@bind-Value绑定，这样就能自动集成Blazor的验证系统：

自定义组件代码（CustomInputFile.razor） #

@inherits InputBase<IBrowserFile>

<input type="file" 
       class="@CssClass" 
       accept="@Accept" 
       @onchange="HandleFileChange" />

@code {
    [Parameter]
    public string Accept { get; set; }

    private void HandleFileChange(ChangeEventArgs e)
    {
        var files = e.Value as IReadOnlyList<IBrowserFile>;
        CurrentValue = files?.FirstOrDefault();
    }

    protected override bool TryParseValueFromString(string value, out IBrowserFile result, out string validationErrorMessage)
    {
        result = CurrentValue;
        validationErrorMessage = null;
        return true;
    }
}

使用自定义组件 #

<EditForm EditContext="@MyEditContext">
    <CustomInputFile id="fileUpload" 
                     @bind-Value="MyModel.MyFile" 
                     class="form-control" 
                     accept="@MyModel.AllowedTypes" />
</EditForm>

这样自定义组件就能像其他输入控件一样，在验证不通过时自动添加invalid类，无需手动处理样式逻辑。

内容的提问来源于stack exchange，提问作者Jeremy