blazor - 通知 EditContext 该字段已更改以进行 Blazor 验证

Question

我正在尝试了解 Blazor 的内部工作原理(并最终编写一些中间件)。我有一个 fiddle以三种不同的方式绑定(bind)三个不同的字段:

• FirstName 字段绑定(bind)到 InputText 按预期工作，并在清除框和焦点更改时显示验证消息。
• MiddleName 字段绑定(bind)到常规输入，无法“按预期”工作，并且在清除它和焦点更改时不显示验证消息。通过浏览 Blazor 源代码，我发现 EditContext.NotifyFieldChanged 是控件本身 (InputBase) 的一个问题。
  • 值得注意的是，如果您提交我想了解所涉及的生命周期的表单，则会显示该消息。
• LastName 字段也绑定(bind)到常规输入，但做了一些黑客操作来引发 EditContext.OnFieldChanged 并触发验证工作。 onchange 有更好的方法吗？提交如何设法引发验证消息？ 有很多引用捕获、表达式、反射和“仅供内部使用”CreateBinder 方法的使用。

为了便于引用，下面是 fiddle 的代码:

@page "/"
@using System.ComponentModel.DataAnnotations
@using System.Linq.Expressions;
@using System.Reflection;
@implements IHasEditContext;

<h1>Hello, world!</h1>

<EditForm EditContext="this.EditContextRef">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <div class="form-group">
        <InputText @bind-Value="@this.FirstName" class="form-control" />
        <ValidationMessage For="() => this.FirstName"></ValidationMessage>
    </div>
    <div class="form-group">
        <input @bind-value="@this.MiddleName" class="form-control" />
        <ValidationMessage For="() => this.MiddleName"></ValidationMessage>
    </div>
    <div class="form-group">
        <input value="@this.LastName" class="form-control" @onchange="(CreateBinder2(this, () => this.LastName,  this.LastName))" />
        <ValidationMessage For="() => this.LastName"></ValidationMessage>
    </div>


    <input type="submit" value="Go" />
</EditForm>

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        EditContextRef = new EditContext(this);
    }

    //BasicFormValidator Form1Validator = new BasicFormValidator();
    [Required]
    public String FirstName { get; set; } = "delete me and change focus to cause validation";
    [Required]
    public String MiddleName { get; set; } = "delete me and change focus - no validation";
    [Required]
    public String LastName { get; set; } = "delete me and change focus - validation but manually calling NotifyFieldChanged";

    public EditContext EditContextRef { get; set; }

    public static EventCallback<ChangeEventArgs> CreateBinder2(
        IHasEditContext receiver,
        Expression<Func<string?>> propExpression,
        string existingValue,
        System.Globalization.CultureInfo? culture = null)
    {
        var fieldIdentifier = FieldIdentifier.Create(propExpression);
        Action<String> valueSetter = (string v) =>
        {
            PropertyInfo prop = fieldIdentifier.Model.GetType().GetProperty(fieldIdentifier.FieldName, BindingFlags.Public | BindingFlags.Instance);
            prop.SetValue(fieldIdentifier.Model, v);
            receiver.EditContextRef.NotifyFieldChanged(fieldIdentifier);
        };

        return EventCallback.Factory.CreateBinder<string>(receiver, valueSetter, existingValue, culture);
    }


}

Answer 1

But i still don't understand how the submit did manage to raise NotifyFieldChanged

它没有。当您提交 EditForm 时，会调用 EditContext.Validate() 并验证模型中的所有 字段(属性)。

我不知道 Validate() 的确切内部工作原理，但您可以将其添加到 fiddle 中:

 <input type="button" value="Check" @onclick="ValidateThis" />

和

void ValidateThis()
{
    Console.WriteLine("Before " + string.Join(",", EditContextRef.GetValidationMessages()));
    EditContextRef.Validate();
    Console.WriteLine("After  " + string.Join(",", EditContextRef.GetValidationMessages()));
}

如果 MiddleName 为空，则“After”写入行将包含它。