Meaningless Notebook

それなりに考えて作ったので備忘録用に。

『InputModel.cs』

public sealed class InputModel
{
    public string Hoge { get; set; } = string.Empty;
}

フォ－ムの項目を定義する為のモデルクラス。

このモデルクラスを使ってコンポ－ネント内外でデ－タをやり取りする。

『InputEditForm.razor』

@if (editContext is not null)
{
    <EditForm EditContext="editContext" FormName="Fuga" method="post" onSubmit="OnSubmit">
        <DataAnnotationValidator />

        <ValidationSummary class="text-danger" role="alert" />

        <div>
            <label>
                Identifier: 
                <InputText @bind-Value="Input.Hoge" />
            </label>
        </div>

        <ValidationMessage For="() => Input.Hoge" class="text-danger" />
    </EditForm>
}

@code {
    [Parameter]
    public required InputModel Input { get; set; }

    [Paramter]
    public EventCallback OnValid { get; set; }

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

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        editContext = new(Input);
    }

    private async Task Submit()
    {
        if (!editContext.Validate())
        {
            if (OnInvalid.HasDelegate)
            {
                 await OnInvalid.InvokeAsync();
            }
        }
        else
        {
            if (OnValid.HasDelegate)
            {
                 await OnValid.InvokeAsync();
            }
        }
    }
}

再利用可能なフォ－ムコンポ－ネント。

呼び出し元から InputModel インスタンスと EditForm のバリデ－ションチェックの成否後に実行するコ－ルバック関数を渡してもらう。

『Page.razor』

<InputEditForm Input=@Input OnValid=@OnValid OnInvalid=@OnInvalid />

@code {
    private InputModel Input { get; set; } = new();

    public async Task OnValid()
    {
        // バリデ－ションチェック成功時の処理
    }

    public async Task OnInvalid()
    {
        // バリデ－ションチェック失敗時の処理
    }
}

利用したいペ－ジでは、フォ－ムコンポ－ネントにパラメ－タを渡すだけでいくらでも同じフォ－ムが使いまわせるようになる。

参考元

• EditForm.cs