Blazor MudForm中条件显示的MudTextField验证函数未触发问题

问题原因 #

Blazor的@if条件渲染会直接销毁或重建组件：

• 初始隐藏的字段组件不会被MudForm在初始化时收集到表单验证列表中
• 即使初始显示，一旦被@if隐藏，组件会从DOM和MudForm的关联列表中移除；再次显示时组件重建，但MudForm不会自动重新扫描并关联新创建的字段，导致验证回调无法触发。

解决方法 #

方法1：用组件自身的Visible属性替代@if（推荐） #

MudBlazor组件大多提供Visible属性，设置为false时仅隐藏组件（不会销毁），组件始终保持与MudForm的关联，验证逻辑正常生效。

修改后的代码：

@page "/page"

<MudForm
    Model="@Model"
    Validation="@(new Func<object, string, IEnumerable<string>>(ValidateCallback))"
    ValidationDelay="0">
    
    <MudTextField Label="Property" @bind-Value="@Model.Property" For="@(() => Model.Property)"></MudTextField>

    <!-- 使用Visible属性控制显示，组件不会被销毁 -->
    <MudTextField 
        Label="Property2" 
        @bind-Value="@Model.Property2" 
        For="@(() => Model.Property2)"
        Visible="@_visible"></MudTextField>
</MudForm>
<MudCheckBox Label="Show/hide child-component" @bind-Checked="@_visible"></MudCheckBox>

@code {
    class TestModel
    {
        public string Property { get; set; }
        public string Property2 { get; set; }
    }

    private TestModel Model { get; } = new();
    private bool _visible;

    IEnumerable<string> ValidateCallback(object obj, string arg)
    {
        return new[] { $"{arg} validation failed!" };
    }
}

方法2：手动触发MudForm重新验证与组件关联 #

如果必须使用@if条件渲染，可以通过MudForm的引用，在显示字段后手动触发验证，强制MudForm重新扫描并关联组件：

@page "/page"

<!-- 给MudForm添加引用 -->
<MudForm
    @ref="_formRef"
    Model="@Model"
    Validation="@(new Func<object, string, IEnumerable<string>>(ValidateCallback))"
    ValidationDelay="0">
    
    <MudTextField Label="Property" @bind-Value="@Model.Property" For="@(() => Model.Property)"></MudTextField>

    @if (_visible)
    {
        <MudTextField Label="Property2" @bind-Value="@Model.Property2" For="@(() => Model.Property2)"></MudTextField>
    }
</MudForm>
<MudCheckBox Label="Show/hide child-component" @bind-Checked="@_visible"></MudCheckBox>

@code {
    class TestModel
    {
        public string Property { get; set; }
        public string Property2 { get; set; }
    }

    private TestModel Model { get; } = new();
    private MudForm _formRef;
    private bool _visible
    {
        get => _visibleValue;
        set
        {
            _visibleValue = value;
            // 当字段显示时，手动触发表单验证，让MudForm重新关联组件
            if (value && _formRef != null)
            {
                _ = _formRef.ValidateAsync();
            }
        }
    }
    private bool _visibleValue;

    IEnumerable<string> ValidateCallback(object obj, string arg)
    {
        return new[] { $"{arg} validation failed!" };
    }
}

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