子组件上的 Ant design blazor 验证不显示验证消息答案

【问题标题】：Ant design blazor validation on child components not displaying validation message子组件上的 Ant design blazor 验证不显示验证消息
【发布时间】：2021-06-10 00:02:12
【问题描述】：

我正在使用 Ant design Blazor 并尝试创建一个子组件并像往常一样从父组件应用验证。下面是我的代码。

子组件

<AntDesign.FormItem Label="@Label">
    <AntDesign.InputNumber Step="Step" Min="Min" @bind-Value="@Amount" OnChange="OnAmountChanged" 
    TValue="double?" />    
</AntDesign.FormItem>

@code {
[Parameter]
public string Label { get; set; }

[Parameter]
public double Step { get; set; }

[Parameter]
public double Min { get; set; } = double.MinValue;

[Parameter]
public double Max { get; set; } = double.MaxValue;

[Parameter]
public string Placeholder { get; set; }

[Parameter]
public double? Amount { get; set; }

[Parameter]
public EventCallback<double?> AmountChanged { get; set; }

private async Task OnAmountChanged(double? value)
{
    await AmountChanged.InvokeAsync(value);
}
}

父组件

<AntDesign.Content>
    <AntDesign.Form LabelColSpan="8"
                WrapperColSpan="16"
                Model="@exchangeRate"
                OnFinish="@OnFinish"
                OnFinishFailed="@OnFinishFailed">
    <Validator>
        <FluentValidator TValidator="ExchangeRateValidator" />
    </Validator>
    <ChildContent>
        <AntDesign.FormItem Label="Rate">
            <AntDesign.InputNumber Step="0.1" Min="0" @bind-Value="context.Rate" Formatter="RateFormat" />
        </AntDesign.FormItem>

        <FormItem Label="Date">
            <DatePicker TValue="DateTime?" Format="yyyy/MM/dd" @bind-Value="context.Date">
            </DatePicker>
        </FormItem>

        <InputNumberComponent Label="Rate" @bind-Amount="context.Amount"></InputNumberComponent>

        <Button Type="primary" HtmlType="submit">Submit</Button>
    </ChildContent>
    </AntDesign.Form>
</AntDesign.Content>

可以看出，我直接使用@bind-Amount 将Amount 的值绑定到组件。但是，当我单击提交按钮时，它会触发验证并在前两个字段上显示验证消息，而不是在子组件上。

任何指针？

【问题讨论】：

标签： validation blazor ant-design-blazor

【解决方案1】：

我的一位同事能够帮助解答。我们必须查看 FormItem 的 Ant Design Blazor 源代码，以弄清楚发生了什么并得到答案。为了获取验证消息，Ant 依赖于 EditContext 中的验证消息，但使用 Any 输入控件的 FieldIdentifier 检索它们。

FieldIdentifier 是 Ant 使用控件的 ValueExpression 而不是值创建的。当我们从子控件设置值时，将 Value 作为 ValueExpression，然后在查找验证消息时，它会针对 搜索错误消息值，而不是实际的模型字段。

在绑定到子属性时将 ValueExpression 设置为绑定表达式可解决此问题。

【讨论】：

你能分享你的修复吗？