将EditForm移入组件后加载页面抛出异常，已设Model仍报错

问题原因 #

你把EditForm抽成独立组件MyEditForm后，组件内部的EditForm并没有拿到Model参数——因为父组件的myModel不会自动传递给子组件，而你的MyEditForm也没有声明接收Model的参数，导致内部EditForm缺少必填的Model/EditContext，从而抛出异常。

解决方案 #

需要让自定义组件接收并传递必要的参数给内部EditForm，步骤如下：

1. 修改自定义组件MyEditForm.razor #

添加泛型参数和必要的组件参数，将外部传入的值传递给内部EditForm：

@typeparam TModel

<EditForm Model="@Model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit" Context="EditFormContext">
    <!-- 保留你原来的表单控件内容 -->
</EditForm>

@code {
    // 声明接收Model的参数
    [Parameter]
    public TModel Model { get; set; }

    // 声明接收提交回调的参数
    [Parameter]
    public EventCallback OnValidSubmit { get; set; }

    [Parameter]
    public EventCallback OnInvalidSubmit { get; set; }
}

2. 在父页面中传递参数给MyEditForm #

使用组件时，把原来的Model和回调方法通过参数传递进去：

<MyEditForm Model="@myModel" OnValidSubmit="@SubmitSuccess" OnInvalidSubmit="@SubmitFailure"></MyEditForm>

@code {
    private YourModelType myModel = new YourModelType();

    private void SubmitSuccess()
    {
        // 原提交成功逻辑
    }

    private void SubmitFailure()
    {
        // 原提交失败逻辑
    }
}

这样修改后，内部的EditForm就能正确获取到Model参数，表单即可正常运行。

内容的提问来源于stack exchange，提问作者Ivan Debono