Blazor - 如何让子组件显示验证消息？

Question

如果嵌套组件未正确填写，我需要显示验证消息。该组件由其他父组件使用，他们需要获得有关是否存在验证问题的反馈。

我已经为嵌套组件尝试了以下代码并使用了 CanSubmit 方法。虽然该方法可以正确判断是否存在验证问题，但验证消息并未显示。

下面所有代码都可以在blzorrepl上测试: https://blazorrepl.com/repl/GvOQlvvv1789ra1G37

@if(editContext != null) {
    <EditForm EditContext="@editContext">
        <input type="text" @bind="testModel.Name" />
        <DataAnnotationsValidator />
        <ValidationSummary />
    </EditForm>
}

@code {
    [Parameter]
    public TestModel testModel
    {
        get { return (TestModel)editContext?.Model; }
        set { editContext = new EditContext(value); }
    }

    EditContext editContext;

    public bool CanSubmit()
    {
        return editContext.Validate();
    }
}

这是我的父组件代码，减少了一些但重现了问题:

<ChildComponent @ref="myTestComponent" testModel="testModel" />
<input type="button" @onclick="buttonClick" value="validate programmatically" />
<div>@testMessage</div>

@code {
    TestModel testModel = new TestModel();
    ChildComponent myTestComponent;
    string testMessage;

    void buttonClick()
    {
        testMessage = "not passed validation";

        if (myTestComponent.CanSubmit())
        {
            testMessage = "passed validation!";
        }
    }
}

testMessage 仅用于显示验证状态。

我该怎么做才能使父组件导致嵌套组件显示验证消息？我只能将 submit 放在父组件中。

按照要求，这是我正在做的事情的一个更完整的例子，一个可以在线编辑的项目列表以及一个用于添加更多实例的表单。 https://blazorrepl.com/repl/mlYwlQPm34bekYE824

Answer 1

我将尝试解释为什么您的方法不起作用，然后提出解决方法。希望我能正确理解您的意图。

首先你需要改变<input type="text" ...>至 <InputText @bind-Value="..." />

当你的方法buttonClick在您的父组件中完成，Blazor 将调用 StateHasChanged在你的组件上。它是 EventHandler 的内置逻辑的一部分。 .这将触发子组件的组件生命周期。在那个周期中，你的子组件属性的 setter testModel将再次被调用。 Blazor 不对相等性进行任何测试。 (唯一强大的检查引擎是渲染周期结束时的 DiffierentialRenderTree)。这意味着一个新的 EditContext将被创建。但是，此上下文不知道验证错误。因此消息消失。为了证明这一点，在 setter 中设置一个计数器变量并将其显示在页面上。你会看到这个结果。

.

为避免这种情况，您创建了 EditContext一次，例如，在设置参数时。

@code {

    [Parameter]
    public TestModel testModel { get; set; }

    EditContext editContext;

   protected override void OnParametersSet()
   {
       base.OnParametersSet();
       if(editContext == null)
       {
           editContext = new EditContext(testModel);
       }
   }

    public bool CanSubmit()
    {
        return editContext.Validate();
    }
}

如果您需要更新模型但保留验证状态，请写评论，我们可以从那里开始。