几个组件上Blazor表单的绑定和验证

Question

我正在尝试将Blazor表单分离为多个组件。单一版本处理验证和绑定。如何在单独的组件上进行验证和绑定？我是否使用级联参数、非级联参数、级联EditForm等？有很多关于巴兹尔，但挣扎着把这一切放在一起为这个案子。

单人和地址组件：

<EditForm Model=@FormData>
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value=FormData.FullName />
    <InputText @bind-Value=FormData.Address1 />
    <InputText @bind-Value=FormData.Address2 />
    <input type="submit" value="Submit" class="btn btn-primary" />
</EditForm>

@code {
    PersonFullDataModel FormData = new PersonFullDataModel();
}

单一型号：

public class PersonFullDataModel
{
    [Required]
    public string FullName { get; set; }
    [Required]
    public string Address1 { get; set; }
    public string Address2 { get; set; }
}

单独的人员部分：

<EditForm Model=@FormData>
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value=FormData.FullName />
    <ComponentAddress/>
    <input type="submit" value="Submit" class="btn btn-primary" />
</EditForm>

@code {
    PersonDataModel FormData = new PersonDataModel();
} 

独立地址组件(ComponentAddress)：

<InputText @bind-Value=FormData.Address1 />
<InputText @bind-Value=FormData.Address2 />

@code {
    AddressDataModel FormData = new AddressDataModel(); // this data does not go anywhere
}

人物模型：

public class PersonDataModel
{
    [Required]
    public string FullName { get; set; }
    public AddressDataModel Address { get; set; }
}

地址模式：

public class AddressDataModel
{
    [Required]
    public string Address1 { get; set; }
    public string Address2 { get; set; }
}

Answer 1

你在这里有两个选择：

• 使用<ObjectGraphDataAnnotationsValidator />和[ValidateComplexType]属性。更多信息。
• 使用FluentValidation.更多信息或Nuget包装.

我建议使用fluent验证。更多的最初的挣扎，但复杂的验证是可能的(并工作良好的blazor客户端)。

Answer 2

应该更改PersonFullDataModel类，使其包含两个属性：PersonDataModel和AddressDataModel。它们必须在父组件中实例化。

在ComponentAddress中，您应该创建一个参数：

[Parameter]
public PersonFullDataModel PersonFullData { get; set; }

在address组件中，将绑定更改为PersonFullData.AddressData.Address1和PersonFullData.AddressData.Address2。

由于PersonFullData参数是通过引用从主组件传递给单个组件的，所以它在两边都是可用的。