You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

自定义MudDatePicker的ErrorText不生效,默认错误消息仍显示

MudDatePicker自定义ErrorText不生效的解决方法

直接设置ErrorText无法覆盖MudDatePicker内置验证的默认错误消息,因为组件在检测到日期格式无效等内置验证失败时,会自动生成并显示默认消息,优先级高于手动设置的ErrorText。以下是两种可行的解决方式:

方式一:结合DataAnnotations与EditForm实现自定义验证消息

通过在模型属性上添加验证特性并指定错误消息,配合EditForm和DataAnnotationsValidator,让组件在验证失败时显示自定义消息:

<EditForm Model="@_dateModel" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <MudDatePicker 
        Label="Data" 
        Editable="true" 
        @bind-Date="@_dateModel.SelectedDate" 
        Mask="@(new DateMask("00-00-0000"))"
        DateFormat="dd-MM-yyyy" 
        Placeholder="dd-MM-YYYY" 
        Variant="Variant.Outlined" />
    <ValidationMessage For="@(() => _dateModel.SelectedDate)" />
</EditForm>

@code {
    private DateModel _dateModel = new DateModel();

    private void HandleSubmit()
    {
        // 处理表单提交逻辑
    }

    public class DateModel
    {
        [Required(ErrorMessage = "Customized error message")]
        [DataType(DataType.Date, ErrorMessage = "Customized error message")]
        public DateTime? SelectedDate { get; set; } = DateTime.Today;
    }
}

方式二:手动控制组件的错误状态

监听日期值变化,手动判断输入有效性,控制组件的Error状态和ErrorText:

<MudDatePicker 
    Label="Data" 
    Editable="true" 
    @bind-Date="_selectedDate" 
    Mask="@(new DateMask("00-00-0000"))"
    DateFormat="dd-MM-yyyy" 
    Placeholder="dd-MM-YYYY" 
    Variant="Variant.Outlined"
    Error="@_isError"
    ErrorText="Customized error message"
    ValueChanged="@OnDateValueChanged" />

@code {
    private DateTime? _selectedDate = DateTime.Today;
    private bool _isError;

    private void OnDateValueChanged(DateTime? newValue)
    {
        // 当输入文本非空但解析失败时,标记为错误状态
        var picker = FindComponent<MudDatePicker>().Instance;
        _isError = newValue == null && !string.IsNullOrWhiteSpace(picker.Text);
        StateHasChanged();
    }
}

内容的提问来源于stack exchange,提问作者Joaquim Correia

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.12 19:07:25