如何显示表单验证从嵌套的Blazor EditForm



假设我有一个Person类,它可以有一个地址列表。我想创建一个blazor EditForm,用户在其中填写所需的信息,并点击按钮添加一个或多个地址元素。如果他们添加了一个地址字段,表单验证应该捡起它不允许有一个空的街道值。

问题是,似乎编辑表单的自动验证只是忽略了内部组件。

public class Person
{
[Required]
public string Name {get;set;}
public int Age {get;set;
public List<Address> Addresses {get;set;}
}
public class Address
{
[Required]
public string Street {get;set;}
}

CreatePerson形式

<div>
<EditForm Model="person" OnValidSubmit="CreateNewPerson">
<DataAnnotationsValidator />
<div>
<label for="name">Name</label>
<InputText class="" id="name" @bind-Value="person.Name" />
</div>
<div>
<label for="age">Age</label>
<InputNumber id="age" @bind-Value="person.Age" />
</div>
<div>
<label>Addresses</label>
<AddressEditor Addresses="person.Addresses" />
</div>
<div>
<button type="submit">Create</button>
</div>

<ValidationSummary />
</EditForm>
</div>

@code{
private Person person = new();

private async Task CreateNewPerson()
{
// ... logic for submitting
}
}

AddressEditor

<div>
<button type="button" @onclick="AddNewAddress">Add</button>
</div>
@for (var i = 0; i < Addresses.Count; i++)
{
<EditForm Model=Addresses[i]">
<div>
<label>Street</label>
<InputText @bind-Value="Addresses[i].Street"/>
</div>
</EditForm>
}

@code{
[Parameter}
private List<Address> Addresses = new();

private void AddNewAddress()
{
Addresses.Add(new Address());
}
}

我试过传递一个EditContext到内部组件,但它似乎没有任何效果,我也试过添加"DataAnnotationsValidator"在内部组件中,但这只复制了我从丢失的Person名称(如果它丢失)中获得的错误消息

几年前我就遇到了DataAnnotations的这种限制。我不确定现在是否有其他方法,但我在2020年所做的是使用这个软件包的预览版本https://www.nuget.org/packages/Microsoft.AspNetCore.Components.DataAnnotations.Validation/3.2.0-rc1.20223.4来自微软。从那时起,它就没有更新过,但我可以确认它仍然可以在。net 7中使用。

关键是将此属性添加到列表中。

[ValidateComplexType]
public List<Address> Addresses { get; set; }

我个人会使用FluentValidation进行更复杂的验证,因为它提供了比DataAnnotations更多的可能性。

相关内容

  • 没有找到相关文章

最新更新