EditForm 验证未将无效类应用于自定义组件

Question

在使用 blazor 时，创建可重用的自定义组件很重要；这是使用 Blazor 的要点之一。

我已经创建了一个基本的 Input 组件，它使用 Bootstrap 作为它的 CSS，如图所示。

@inherits InputBase<string>

<InputText type="@Type"
           class="form-control"
           id="@_id"
           placeholder="@Placeholder"
           @bind-Value="CurrentValue"
           disabled="@Disabled"
           @attributes="AdditionalAttributes"/>
/* Additional properties below for placeholder, disabled, type, etc. they're just string properties */

我把它放在一个 EditForm 中...

<EditForm Model="MyModel"
      OnValidSubmit="ViewModel.CreateAsync">
    <DataAnnotationsValidator />

<PrimaryInput @bind-Value="MyModel.Name"
              Placeholder="Name..."/>

</EditForm>

问题是，这不会将“无效”类添加到项目中。有效和修改都会出现，但是一旦输入变为无效，它不会像使用非自定义组件那样将有效更改为无效。下面是我的模型，显示我已向模型添加了验证。

public class MyModel
{
    [StringLength(5)]
    [Required]
    public string Name { get; set; }
}

下面是显示的图片：

这是 Blazor 生成的 html...

<input type="text" id="aa106d17-46d7-442c-be39-6c947f17186b" placeholder="Name..." aria-describedby="14b1189e-c3c5-4e1f-ae1d-330756147b44" class="form-control valid" aria-invalid="">

...如您所见，该类仍然有效，但已应用 aria-invalid 属性。以下是正在验证的非自定义组件输入的 HTML...

<input class="modified invalid" aria-invalid="">

...在这个上，无效。某些东西阻止了自定义组件上的类切换为无效。

Answer 1

您需要触发表单的EditContext。有几种方法可以做到这一点 - 我将概述其中的两种。

在您的自定义组件中，您可以覆盖 TryParseValueFromString 并在那里处理验证 - InputBase<> 在其中包含这些属性。考虑到您的类型已经是 string，这可能没有意义。

否则，您可以让您的自定义组件将EditContext 作为级联参数注入，然后在更改时使用事件回调来调用EditContext 的NotifiedFieldChanged。

下面这个第二个例子的小例子：

[CascadingParameter]
private EditContext EditContext { get; set; }

[Parameter] 
private Expression<Func<string>> ValueExpression { get; set; }

private FieldIdentifier _field;

private void OnInitialized()
{
    _field = FieldIdentifier.Create(ValueExpression);
} 

private void OnInputChanged(ChangeEventArgs args)
{
    EditContext.NotifyFieldChanged(_fieldIdentifier);
}

Answer 2

我在我的自定义组件中使用以下代码修复了它....

@inherits InputText

<InputText class="form-control"
 Value="@Value"
 ValueExpression="ValueExpression"
 ValueChanged="OnInputChanged" />

... 继承带有 InputText 的 InputText 有点奇怪。我的代码是这样的......

private void OnInputChanged(string value)
{
    CurrentValueAsString = value;
    EditContext.NotifyFieldChanged(FieldIdentifier);
}

然后在我的代码中我像这样放置该组件....

<TestInput @bind-Value="ViewModel.Menu.Name"/>

这是一个有点奇怪的工作，但是当它有效/无效时，它可以完成工作并应用正确的类。

Answer 3

您从<InputBase> 继承并在其中放置InputText（InputBase 控件）。这真的没有意义。

以下示例演示了如何自定义标准 InputText。它展示了如何添加自定义属性、处理disabled 的一种方法、如何将用户输入的属性添加到输入中，以及如何更新键盘输入的值而不是失去焦点。

@namespace Blazor.Starter.Components
@inherits InputText

    <input type="text" disabled="@Disabled" value="@this.CurrentValue" @oninput="OnInput" @ref="Element" id="@Id" @attributes="this.AdditionalAttributes" />

@code{

   [Parameter] public ElementReference? Element { get; set; }
   [Parameter] public string? Id { get; set; }
   [Parameter] public bool Disabled { get; set; }

    private void OnInput(ChangeEventArgs e)
        => this.CurrentValueAsString = e.Value.ToString();
}

@page "/Test3"
<EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label class="form-label">First Name</label>
    <CustomInput class="form-control" @bind-Value="this._formModel.FirstName" Id="mycontrol"></CustomInput>
    <label class="form-label">First Name</label>
    <CustomInput class="form-control" @bind-Value="this._formModel.FirstName" Id="mydisabledcontrol" Disabled="true"></CustomInput>
    <div class=" m-2 p-2">
        <button type="submit" class="btn btn-primary">New Person</button>
    </div>

    <div class="p3-m-3">Value: @_formModel.FirstName</div>

</EditForm>

@code {
    private EditContext? _editContext;
    private FormModel _formModel;

    private void HandleValidSubmit()
    {
        // handler
    }


    private class FormModel
    {
        [StringLength(5)][Required] public string FirstName { get; set; }
    }

    protected override Task OnInitializedAsync()
    {
        _formModel = new FormModel();
        _editContext = new EditContext(_formModel);
        return base.OnInitializedAsync();
    }
}

咏叹调变化

当输入有效/无效时，查看两个 html sn-ps。

<input type="text" id="mycontrol" class="form-control" _bl_759b54c2-54a4-461f-8101-9661c9034c17>

<input type="text" id="mycontrol" class="form-control" _bl_759b54c2-54a4-461f-8101-9661c9034c17 aria-invalid>