それなりに考えて作ったので備忘録用に。
『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()
{
// バリデ-ションチェック失敗時の処理
}
}
利用したいペ-ジでは、フォ-ムコンポ-ネントにパラメ-タを渡すだけでいくらでも同じフォ-ムが使いまわせるようになる。