自定义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
相关产品推荐
相关产品推荐

