Blazor(.NET 8)嵌套组件实现字段级验证的方案问询

针对根级EditForm下多子组件的验证定位问题，以下是几种推荐的字段级验证实现模式：

1. 子组件绑定独立模型实例并关联EditContext #

每个子组件（如Contact）接收独立的模型实例，通过FieldIdentifier明确关联父级EditContext的对应字段，确保错误精准定位到子组件的输入框。

父组件（CreateBill）代码示例： #

<EditForm EditContext="_editContext" OnValidSubmit="CreateBillOnSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    @foreach (var contact in _billModel.Contacts)
    {
        <ContactComponent Contact="contact" EditContext="_editContext" />
    }

    <ChargeTermsComponent ChargeTerms="_billModel.ChargeTerms" EditContext="_editContext" />

    <button type="submit">提交</button>
</EditForm>

@code {
    private BillModel _billModel = new() { Contacts = new List<ContactModel>(new ContactModel[3]) };
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(_billModel);
        base.OnInitialized();
    }

    private void CreateBillOnSubmit()
    {
        // 提交逻辑
    }
}

子组件（ContactComponent）代码示例： #

<div class="contact-form">
    <div class="form-group">
        <label>联系人姓名</label>
        <InputText @bind-Value="Contact.Name" 
                   class="@GetFieldCssClass(nameof(Contact.Name))" />
        <ValidationMessage For="@(() => Contact.Name)" />
    </div>

    <!-- 其他联系人字段 -->
</div>

@code {
    [Parameter, Required] public ContactModel Contact { get; set; }
    [Parameter, Required] public EditContext EditContext { get; set; }

    private string GetFieldCssClass(string propertyName)
    {
        var fieldIdentifier = new FieldIdentifier(Contact, propertyName);
        var fieldState = EditContext.GetFieldState(fieldIdentifier);
        return fieldState.IsModified && fieldState.Invalid ? "input-validation-error" : "";
    }
}

核心是通过FieldIdentifier(Contact, propertyName)将子组件输入字段与父级EditContext的具体模型实例绑定，ValidationMessage自动显示对应字段错误，GetFieldCssClass实现错误时的字段高亮。

2. 封装带验证逻辑的可复用子组件 #

将输入控件与验证逻辑封装为可复用组件，子组件通过CascadingParameter自动获取父级EditContext，减少耦合。

子组件（ContactComponent）优化示例： #

<div class="contact-form">
    <ValidatedInputLabel Label="联系人姓名" For="@(() => Contact.Name)">
        <InputText @bind-Value="Contact.Name" />
    </ValidatedInputLabel>

    <!-- 其他字段 -->
</div>

@code {
    [Parameter, Required] public ContactModel Contact { get; set; }
    [CascadingParameter] private EditContext EditContext { get; set; }

    // 可复用验证输入标签组件
    private class ValidatedInputLabel : ComponentBase
    {
        [Parameter, Required] public string Label { get; set; }
        [Parameter, Required] public Expression<Func<object>> For { get; set; }
        [Parameter] public RenderFragment ChildContent { get; set; }
        [CascadingParameter] private EditContext EditContext { get; set; }

        private FieldIdentifier _fieldIdentifier;

        protected override void OnInitialized()
        {
            _fieldIdentifier = FieldIdentifier.Create(For);
            base.OnInitialized();
        }

        private string GetFieldCssClass()
        {
            var fieldState = EditContext.GetFieldState(_fieldIdentifier);
            return fieldState.IsModified && fieldState.Invalid ? "input-validation-error" : "";
        }

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "div");
            builder.AddAttribute(1, "class", "form-group");
            
            builder.OpenElement(2, "label");
            builder.AddContent(3, Label);
            builder.CloseElement();

            builder.OpenElement(4, "div");
            builder.AddAttribute(5, "class", GetFieldCssClass());
            builder.AddContent(6, ChildContent);
            builder.CloseElement();

            builder.OpenComponent<ValidationMessage<object>>(7);
            builder.AddAttribute(8, "For", For);
            builder.CloseComponent();

            builder.CloseElement();
        }
    }
}

3. 解决错误重复显示问题 #

3个Contact实例的必填字段空值会触发独立验证错误，属于正常行为，可通过以下方式优化：

• 为每个Contact组件添加局部ValidationSummary，仅显示当前实例的错误：

  <div class="contact-form">
      <ValidationSummary For="@(() => Contact)" />
      <!-- 输入字段 -->
  </div>
  

• 自定义根级ValidationSummary组件，过滤重复的错误信息。

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