Blazor EditContext 不会触发 FieldState

Question

当 Form 组件中的值发生变化时。 Editform 不验证并且不将 FieldState 的 IsModified 设置为 true。只有在提交时才会验证。我看到当值发生变化时，class "Modified" 未添加到 HTML 中的输入标签。所以看起来 EditContext 没有设置 FieldState？

我怎样才能做到这一点？

非常感谢！

代码（简体）：

表单组件

@typeparam TItem

<EditForm EditContext="_editContext" OnValidSubmit="OnValidSumit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    @ChildContent
</EditForm>


@code {
    [Parameter] public TItem Model { get; set; }
    [Parameter] public EventCallback OnValidSumit { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }

    private EditContext _editContext;

    protected override void OnParametersSet()
    {
        _editContext = new EditContext(Model);
    }
}

PS 当我使用 OnInitialized 而不是 OnParametersSet 时，我得到修改后的 class。但是 DataAnnotationsValidator 有问题。这就像它没有看到 EditContext 的值，并且在值更改时总是有效或无效（在第一次提交之后）。

protected override void OnInitialized()
{
    _editContext = new EditContext(Model);
}

父组件

<Form Model="someModel" OnValidSumit="Save">
    <InputNumber @bind-Value="Model.Number" />
    <InputText @bind-Value="Model.Name" />
    <button type="submit">Add</button>
</Form>

@code {
    public class SomeModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public SomeModel someModel = new SomeModel();
}

Answer 1

根据您在上面发布的内容并使用上面的代码重现您的问题，看起来有几处可以调整，您将再次工作。

Form.razor

@typeparam TItem

    <EditForm EditContext="_editContext" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        @ChildContent
        <button type="submit" >Add</button>
        <button type="reset" >Reset</button>
    </EditForm>


@code {
    [Parameter] public TItem Model { get; set; }
    [Parameter] public EventCallback<TItem> OnValidSumit { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }

    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(Model);
    }

    async Task HandleValidSubmit()
    {
        await OnValidSumit.InvokeAsync(Model);
        _editContext = new EditContext(Model);
    }
}

表单组件的关键点是我将 <button> 移到了表单中，因此它不再作为子内容提供。其次，我确实在启动时使用 OnInitialized() 方法来初始化 EditContext。

EDIT 第三，表单 OnValidSubmit 现在调用调用回调的私有方法，并且回调现在采用 TItem 的参数。提交有效项目后，将等待事件回调，然后重置编辑上下文。

第四，表单组件现在有一个重置按钮，用于对表单进行软重置。

父组件

@using System.ComponentModel.DataAnnotations 

@* Note the TItem in the line below, specified as the type needed for the EditContext *@

<Form TItem="SomeModel" Model="someModel" OnValidSumit="Save">

    <InputNumber @bind-Value="someModel.Id" />

    <InputText @bind-Value="someModel.Name" />

</Form>

@code {
    public class SomeModel
    {
        //ID can only be between 1 and 10, for demo purposes
        [Range(1,10, ErrorMessage ="ID must be between 1 and 10")]
        public int Id { get; set; }

        //Name is required and must be only letters
        [Required]
        [RegularExpression(@"^+[A-Za-z]+$", ErrorMessage ="Name can only contain letters")]
        public string Name { get; set; }
    }

    public SomeModel someModel = new SomeModel();

    void Save(SomeModel savedModel)
    {
        //do something useful with your model info
        MethodThatAcceptsSomeModel(savedModel);

        // If you want to reset the form, reinitialize the model
        someModel = new SomeModel();
    }
}

父组件的要点：

我为表单指定了 "TItem" 值。我发现有时通用组件在没有它的情况下也能工作，但我通过在其中添加它解决了很多问题。
我添加了“@using System.ComponentModel.DataAnnotations”行，然后向您的模型属性添加了一些数据注释装饰。您展示的实现只会检查不可解析的值，因此这样做会增加一些进一步的限制来测试验证。在此设置中，"Name" 属性将仅接受字母且不能为空，而 "Id" 属性将仅接受 1 到 10 之间的值。
最后，此设置会在您离开表单域时生效。如果您想绑定到 "input" 事件而不是默认的 "change" 事件，那么在您键入时会进行验证，check out this link 来自 MS 的关于如何扩展其输入控件的官方消息.
EDIT 根据 OP 请求重置表单，Save 方法现在采用 SomeModel 类型的参数并且可以用它做一些事情，然后 重新初始化 模型属性，这将重置表单。

希望这对您有所帮助，请告诉我。

Blazor EditContext 不会触发 FieldState

Blazor EditContext doesn't trigger FieldState

blazor

blazor-client-side