InputText的自定义Blazor组件

Question

我想通过将一大块表单代码封装到一个单独的组件中来简化我的代码。

我所做的是创建MyInput.razor，它包含以下代码：

<div class="@ColSize">
<label>@Label</label>
<InputText @bind-Value="Value" class="form-control" />
<ValidationMessage For="() => Value" />
</div>
@code {
public string ColSize { get; set; } = "col-md-12";
[Parameter]
public string Label { get; set; } = string.Empty;
[Parameter]
public string? Value { get; set; }
[Parameter]
public EventCallback<string?> ValueChanged { get; set; }
}

在我的Index.razor中，我添加了一个带有基本验证的简单表单，如下所示：

<EditForm Model="Input" OnValidSubmit="Submit">
<DataAnnotationsValidator />
<ValidationSummary />
<MyInput @bind-Value="Input.Name" />

<button type="submit" class="d-block mt-3">Save</button>
</EditForm>
@code {
public MyModel Input { get; set; } = new();
private void Submit()
{
}
public class MyModel
{
[MinLength(10)]
public string Name { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
}
}

验证和绑定正在工作，但是，我在组件中没有看到<ValidationMessage For="() => Value" />的验证错误。我只能看到带有ValidationSummary的消息。

有什么简单的方法可以让它发挥作用吗？我不想创建继承自InputText或InputBase的新组件。我只想使用现有的输入类型，并在它周围包装一些HTML，这样我就不必每次都键入它了。

Answer 1

<ValidationMessage使用和表达式来获取EditForm正在使用的模型。您需要将表达式传递到组件中。

<div class="@ColSize">
<label>@Label</label>
<InputText @bind-Value="Value" class="form-control" />
<ValidationMessage For=@For />
</div>
@code {
public string ColSize { get; set; } = "col-md-12";
[Parameter] public string Label { get; set; } = string.Empty;
[Parameter] public string? Value { get; set; }
[Parameter] public Expression<Func<TValue>>? For { get; set; } 
[Parameter] public EventCallback<string?> ValueChanged { get; set; }
}

用法：

<MyInput @bind-Value="Input.Name" For="() => Input.Name" />

ValidationMessage 的源代码