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的子组件，以尝试 Tidy 我的代码。它们如下所示：

<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支持使用带有内置DataAnnotationsValidator的数据注释来验证表单输入。但是，DataAnnotationsValidator仅验证绑定到表单的模型的顶级属性，而不是集合或复杂类型的属性。

要验证绑定模型的整个对象图（包括集合和复杂类型的属性），请使用实验性Microsoft.AspNetCore.Components.DataAnnotations.Validation软件包提供的ObjectGraphDataAnnotationsValidator：

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

使用[ValidateComplexType]注释模型属性。在以下模型类中，ShipDescription类包含其他数据注释，以验证何时将模型绑定到表单：

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; }
}

Answer 2

我遇到了完全相同的问题。我的代码与您的代码非常相似。我的子组件确实进行了验证，但是未显示验证错误消息。

我确实使用了这种扩展方法：

  private void PivotContainer_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (PivotContainer.SelectedIndex != 0)
        {
           //Change user control
        }
    }

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

2 个答案:

TL：DR懒人解决方案

MS Docs中的片段