我有一个名为 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 在我的子组件中不起作用。知道为什么吗?
最佳答案
我知道我有点晚了,但这是我的答案:)
所以现在有更好的解决方案。
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; }
}
关于validation - 使用子组件时,Blazor EditForm 验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60519482/