如何解决子组件上的 Ant 设计 blazor 验证不显示验证消息
我正在使用 Ant 设计 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 的值绑定到组件上。但是,当我单击“提交”按钮时,它会触发验证并在前两个字段上显示验证消息,但不会在子组件上显示。
有什么指点吗?
解决方法
我的一位同事能够帮助解答。我们必须查看 FormItem 的 Ant Design Blazor 源代码,以确定发生了什么并得到答案。为了获取验证消息,Ant 依赖于 EditContext 中的验证消息,但使用 Any 输入控件的 FieldIdentifier 检索它们。
FieldIdentifier 是由 Ant 使用控件的 ValueExpression 而不是值创建的。当我们从子控件设置值时,将 Value 作为 ValueExpression 并反过来,在查找验证消息时,它会针对 搜索错误消息值而不是实际的模型字段。
在绑定到子属性时将 ValueExpression 设置为绑定表达式修复了该问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。