自定义 Blazor DateTime 使用继承 InputBase<DateTime> 和 ValidationMessage答案

【问题标题】：Custom Blazor DateTime using inherits InputBase<DateTime> with ValidationMessage自定义 Blazor DateTime 使用继承 InputBase<DateTime> 和 ValidationMessage
【发布时间】：2021-07-12 15:58:43
【问题描述】：

我有以下自定义日期输入：

CustomDateInput.razor

<input type="date"
         class="@CssClass"
         @bind=CurrentValue
         @attributes=AdditionalAttributes />

@if (ValidationFor is not null)
{
    <ValidationMessage For="@ValidationFor" />
}

@using System.Linq.Expressions
@inherits InputBase<DateTime?>

@code {
    [Parameter] public Expression<Func<DateTime>>? ValidationFor { get; set; }

    protected override bool TryParseValueFromString(string? value, out DateTime? result, out string validationErrorMessage)
    {
        result = CurrentValue;
        validationErrorMessage = "";
        return true;
    }
}

FooPage.razor

<CustomInputDate @bind-Value="FooDate" ValidationFor="() => FooDate"></CustomInputDate>

FooPage.razor.cs

public DateTime? FooDate { get; set; }

但是，我收到错误：

如何修改我的CustomDateInput 以允许验证参数显示 ValidationMessage？

【问题讨论】：

找到解决方案了吗，分享一下！
MrC aka Shaun Curtis 下面的回答似乎是目前最好的解决方案。
你的 For 也应该可以为空，例如 Expression> For

标签： c# blazor blazor-server-side

【解决方案1】：

组件。我从InputDate 中提取了BuildRenderTree 代码并添加到ValidationMessage 组件中。您需要这样做，因为我不知道如何在 Razor 中进行 For 绑定。我已将For 直接绑定到InputBase 的ValueExpression 属性中。您可能需要添加一些格式/css 来美化它。

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Rendering;
using System;

namespace Blazor.Starter.Components.TestComponents
{
    public class CustomDate : InputDate<DateTime?>
    {

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "input");
            builder.AddMultipleAttributes(1, AdditionalAttributes);
            builder.AddAttribute(2, "type", "date");
            builder.AddAttribute(3, "class", CssClass);
            builder.AddAttribute(4, "value", BindConverter.FormatValue(CurrentValueAsString));
            builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
            builder.CloseElement();
            builder.OpenComponent<ValidationMessage<DateTime?>>(6);
            builder.AddAttribute(7, "For", this.ValueExpression);
            builder.CloseComponent();
        }
    }
}

还有一个演示页面。 validationMessageStore中有一个按钮可以手动设置错误信息。

@page "/editortest"

<h3>EditorTest</h3>
    <EditForm EditContext="editContext">
        <div>
            <CustomDate @bind-Value="model.Date"></CustomDate>
        </div>
    </EditForm>
<div class="m-3 p-3"><input @bind-value="_errormessage"><button class="btn btn-dark ms-2" @onclick="SetError">Set Error</button></div>


@code {
    private dataModel model { get; set; } = new dataModel();
    private EditContext editContext;
    private string _errormessage { get; set; } = "Error in date";

    protected override Task OnInitializedAsync()
    {
        this.editContext = new EditContext(model);
        return base.OnInitializedAsync();
    }

    private void SetError( MouseEventArgs e)
    {
        var validationMessageStore = new ValidationMessageStore(this.editContext);
        validationMessageStore.Clear();
        var fi = new FieldIdentifier(this.model, "Date");
        validationMessageStore.Add(fi, _errormessage);
    }

    public class dataModel
    {
        public string Email { get; set; }
        public DateTime? Date { get; set; }
    }

}

【讨论】：

【解决方案2】：

我有不同的方法可以达到相同的结果，你可以试试！：

[Parameter] public bool ShowError { get; set; } = false;

<input type="date"
     class="@CssClass"
     @bind=CurrentValue
     @attributes=AdditionalAttributes @onfocus="@(() => ShowError =true)"/>
@if(ShoError)
  {
     foreach(var msg in EditCotext.GetValidationMessages(FieldIdententifier))
     {
       <div class="alidation-message">@msg</div>
     }
  }

您还需要保留代码TryParseValueFromString

【讨论】：