子组件列表的 Blazor 验证

Question

我正在尝试使用 Blazor 中的子组件列表实现 ObjectGraphDataAnnotationsValidator。 Animals 的列表绑定在一个表单中，由 for 循环呈现。 Child class 的属性之一是必需的。这是代码：

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" />

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

谢谢

Answer 1

我认为您可能需要将 [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

子组件列表的 Blazor 验证

Blazor validation of List of Child Components

blazor

blazor-server-side

blazor-validation