子组件列表的Blazor验证



我正试图在Blazor中实现ObjectGraphDataAnnotationsValidator中的子组件列表。Animals的列表被绑定在一个形式中,由for循环呈现。子类的一个属性是Required。这是代码:

Test.razor

@using System.ComponentModel.DataAnnotations
@page  "/Test"
@code {
public class MyClass
{
public MyClass()
{
Animals = new List<AnimalItem>();
}
[Required]
public string FormName { get; set; }
public IList<AnimalItem> Animals { get; set; }
}
public class AnimalItem
{
[Required]
public string Name { get; set; }
}
protected override async Task OnInitializedAsync()
{
MyFormData = new MyClass()
{
Animals = new List<AnimalItem>()
{
new AnimalItem { Name = "Fuffy" },
new AnimalItem { Name = "Flaffy" }
}
};
await base.OnInitializedAsync();
}
public MyClass MyFormData { get; set; }
private void OnValidSubmit()
{
}
}
<EditForm Model="MyFormData" OnValidSubmit="@OnValidSubmit" >
<ObjectGraphDataAnnotationsValidator />
<ValidationSummary /> 
<InputText type="text" @bind-Value="MyFormData.FormName"/>
@foreach (var animal in MyFormData.Animals)
{
<Animal AnimalItem="animal"></Animal>
}
<button type="submit">Post</button>
</EditForm>

这是我的组件:

Animal.razor

@code {
[Parameter]
public Test.AnimalItem AnimalItem { get; set; }
}
<label for="Animal">Animal</label>
<InputText  id="Animal" type="text" @bind-Value="@AnimalItem.Name" />

当我编辑组件列表并清除Name字段时,表单正确地通知我需要Name属性。但是,如果我按下提交按钮,这并不妨碍我保存它。我做错了什么?任何关于如何在Blazor中调试验证的建议都是欢迎的:)

感谢

我认为您可能需要将[ValidateComplexType]添加到MyClass上的Animals集合

public class MyClass
{
public MyClass()
{
Animals = new List<AnimalItem>();
}
[Required]
public string FormName { get; set; }
[ValidateComplexType]
public IList<AnimalItem> Animals { get; set; }
}   

MS Docs Section on Complex Types

最新更新