Question

当Form组件中的值更改时。 Editform无法验证，并且不会将IsModified中的FieldState设置为true。只有提交后，它才会生效。我看到值更改时，类“ 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时，我得到了修改后的类。但是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);
    }
}

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

编辑第三，形式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”值。我发现有时通用组件在没有它的情况下仍然有效，但是我通过在其中添加了许多Gotcha来解决了很多问题。
我添加了“ @using System.ComponentModel.DataAnnotations”行，然后将一些“数据注释”修饰添加到了模型属性中。您显示的实现只检查了无法解析的值，因此这样做增加了一些进一步的限制来测试验证。在此设置中，“名称”属性将仅接受字母且不能为空，并且“ Id”属性将仅接受1到10之间的值。
最后，此设置将在您离开表单字段时进行验证。如果您想绑定到“输入”事件而不是默认的“更改”事件，则在您键入时进行验证，check out this link是来自MS的正式单词，说明如何扩展其输入控件。
EDIT ，Save方法现在接受类型为SomeModel的参数，并可以对其进行处理，然后重新初始化模型属性，这将重置表单。

希望这会有所帮助，让我知道。

Blazor EditContext不会触发FieldState

1 个答案: