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

Question

我正在使用 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的值绑定到组件上。但是，当我单击“提交”按钮时，它会触发验证并在前两个字段而不是子组件上显示验证消息。

有什么指点吗？

Answer 1

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

检索它们

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

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

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

Ant design blazor validation on child components not displaying validation message

validation

blazor

ant-design-blazor