求助：使用自动填充填充.NET 8 Blazor表单时变量未更新致验证失败

问题原因 #

• 浏览器自动填充是直接修改输入框DOM值，不会触发Blazor数据绑定依赖的input、change等事件，导致绑定的模型变量无法同步更新。
• Blazor表单验证基于绑定模型的数值，而非输入框实际DOM值，所以自动填充后模型仍为初始值，提交时触发必填项验证失败。

解决方法 #

1. 强制监听输入事件同步值 #

给输入框添加@oninput事件，手动同步DOM值到绑定模型，确保自动填充时触发值更新：

<InputText @bind-Value="Model.Username" 
           @oninput="(() => Model.Username = (string)((InputText)context).Value)" />

也可以封装自定义输入组件，统一处理这类场景。

2. 提交前手动同步DOM值并触发验证 #

通过IJSRuntime读取输入框实际值，更新模型后再执行验证：

@inject IJSRuntime JSRuntime
<EditForm EditContext="_editContext" OnValidSubmit="HandleValidSubmit">
    <InputText @bind-Value="Model.Email" id="Email" />
    <button type="submit">提交</button>
</EditForm>

@code {
    private EditContext _editContext;
    private UserModel Model { get; set; } = new();

    protected override void OnInitialized()
    {
        _editContext = new EditContext(Model);
    }

    private async Task HandleValidSubmit()
    {
        // 读取DOM输入框值并更新模型
        var emailValue = await JSRuntime.InvokeAsync<string>("eval", "document.getElementById('Email').value");
        Model.Email = emailValue;
        
        // 重新触发验证
        if (_editContext.Validate())
        {
            // 执行提交逻辑
        }
    }

    public class UserModel
    {
        [Required]
        public string Email { get; set; } = string.Empty;
    }
}

3. 禁用浏览器自动填充（临时方案） #

给表单或输入框添加autocomplete="off"属性，阻止浏览器自动填充：

<EditForm Model="@Model" autocomplete="off">
    <InputText @bind-Value="Model.Password" autocomplete="off" />
</EditForm>

注意：部分现代浏览器可能忽略autocomplete="off"，此方案兼容性有限。

4. 利用.NET 8的@bind:after通知字段变化 #

通过@bind:after在值更新后通知EditContext字段变化，确保验证状态同步：

<InputText @bind-Value="Model.Phone" 
           @bind:after="(() => _editContext?.NotifyFieldChanged(FieldIdentifier.Create(() => Model.Phone)))" />

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