Блог

Поэтому я создаю библиотеку компонентов в blazor и добавляю поддержку входных компонентов, чтобы в Blazor была встроена проверка.

 @inherits WindyInputTextBase;

@if(!string.IsNullOrEmpty(Label))
{
    <label for="@Id" class="block text-sm font-medium">@Label</label>
}

<input class="mt-3 p-2 focus:outline-none focus:ring focus:ring-primary-light focus:border-primary block w-full shadow-sm sm:text-sm border border-gray-300 rounded-md @CssClass" id="@Id" name="@Id" @bind="@CurrentValue" />
<!--Div is empty when validation is not done.-->
<div class="text-danger text-sm mb-3">
    <ValidationMessage For="@ValidationFor" />
</div>
 

Базовый класс для входного компонента:

 public class WindyInputTextBase : WindyInputBase<string>
{
    protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out string result, [NotNullWhen(false)] out string? validationErrorMessage)
    {
        result = value is null ? string.Empty : value;
        validationErrorMessage = null;
        return true;
    }
}
 

И базовый класс этого:

 public abstract class WindyInputBase<T> : InputBase<T>
{
    [Parameter]
    public string? Label { get; set; }
    
    [Parameter]
    public Expression<Func<T>>? ValidationFor { get; set; }
}
 

Компонент (и другие, использующие ту же базу) работают нормально, но я получаю эту ошибку при их использовании вне компонента EditForm:

Компонент визуализации необработанных исключений: WindyUI.Form.EditForm.WindyInputText требует каскадного параметра типа EditContext. Например, вы можете использовать WindyUI.Form.EditForm.WindyInputText внутри формы редактирования. Система.Исключение InvalidOperationException: WindyUI.Form.EditForm.WindyInputText требует каскадного параметра типа EditContext. Например, вы можете использовать WindyUI.Form.EditForm.WindyInputText внутри формы редактирования.

Это нормально и ожидаемо, но заставляет меня написать два набора входных компонентов, один из которых имеет проверку, а другой-нет. Я знаю, что MudBlazor делает то, что я хочу сделать, но я не знаю, как именно они это делают, и их исходный код не совсем понятен для меня, так как нет наследования от InputBase.

Есть ли способ создать компонент со встроенной проверкой blazor, который можно использовать как внутри, так и вне компонента EditForm? Конечно, это означает, что никакая встроенная проверка не подходит, если вы не используете компоненты внутри формы редактирования.

Спасибо,