validation - 使用子组件时，Blazor EditForm 验证不起作用

Question

我有一个名为 EditOffice 的 Blazor 组件。它看起来如下:

<EditForm Model="@Office" OnValidSubmit="@HandleValidSubmit">

    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputTextRow Label="Name" @bind-Value="@Office.Name" Placeholder="Enter name" />
    <InputTextRow Label="ABN" @bind-Value="@Office.ABN" Placeholder="Enter ABN" />
...
    <button type="submit" class="btn btn-primary edit-btn">Save office</button>
</EditForm>

我创建了名为 InputTextRow 的子组件，试图整理我的代码。它们如下所示:

<div class="form-group row">
    <label for="@Id" class="col-sm-3">@Label: </label>
    <InputText id="@Id" @oninput="OnValueChanged" @bind-Value="@Value" class="form-control col-sm-8" placeholder="@Placeholder"></InputText>
    <ValidationMessage class="offset-sm-3 col-sm-8" For="@(() => Value)" />
</div>

@code {

    public string Id => Label.ToLower().Replace(" ", "");

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

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

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

    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        return ValueChanged.InvokeAsync(Value);
    }
}

ValidationMessage 在我的子组件中不起作用。知道为什么吗？

Answer 1

我知道我有点晚了，但这是我的答案:)
所以现在有更好的解决方案。
TL:懒人的DR解决方案
请注意 - 它是 实验 ，但包已经在候选版本中，所以我猜不用担心。
使用 Microsoft.AspNetCore.Components.DataAnnotations.Validation包装和 <ObjectGraphDataAnnotationsValidator />而不是 <DataAnnotationsValidator />并使用这个东西:

using System.ComponentModel.DataAnnotations;

public class YourComplexModel
{
    // other properties

    [ValidateComplexType] // <--life saver
    public ChildModel ChildModel { get; set; } = new ChildModel();
}

来自 MS Docs 的片段
友情链接 Microsoft Docs :

Blazor provides support for validating form input using data annotations with the built-in DataAnnotationsValidator. However, the DataAnnotationsValidator only validates top-level properties of the model bound to the form that aren't collection- or complex-type properties.

To validate the bound model's entire object graph, including collection- and complex-type properties, use the ObjectGraphDataAnnotationsValidator provided by the experimental Microsoft.AspNetCore.Components.DataAnnotations.Validation package:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

Annotate model properties with [ValidateComplexType]. In the following model classes, the ShipDescription class contains additional data annotations to validate when the model is bound to the form:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = 
        new ShipDescription();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}