[Blazor] EditForm OnInvalidSubmit 속성 사용하기

개요

• Blazor 에서 제공해주는 기본 컴포넌트인 EditForm 을 이용하여 현재 Create 폼을 생성했습니다.
• 여기서 EditForm 컴포넌트를 사용하였는데, EditForm 컴포넌트에서 제공하는 OnInvalidSubmit 속성에 대해서 정리 진행합니다.

EditForm 유효성 검사 속성

• EditFrom 은 양식 제출을 처리하기 위해 다음 콜백을 제공합니다.
  • OnValidSubmit 은 유효한 필드가 있는 양식이 제출될 때 실행할 이벤트 처리기를 할당하는 데 사용합니다.
  • OnInvalidSubmit 은 유효하지 않은 필드가 있는 양식이 제출될 때 실행할 이벤트 처리기를 할당하는데 사용합니다.
  • OnSubmit 은 양식 필드의 유효성 검사 상태와 관계없이 실행할 이벤트 처리기를 할당하는데 사용합니다. 이벤트 처리기 메서드에서 EditContext.Validate 을 호출하여 양식의 유효성을 검사합니다. Validate가 true를 반환하면 양식이 유효한 것입니다.

EditForm OnInvalidSubmit 속성 추가

• 다음은 EditForm 컴포넌트에 OnInvalidSubmit 속성 값을 추가해주는 코드 입니다.

<EditForm Model="@Model" OnValidSubmit="FormSubmit" OnInvalidSubmit="@HandleInvalidSubmit">

• 현재 EditForm 컴포넌트에는 OnvalidSubmit, OnInvalidSubmit 속성 모두 설정되어 있습니다.
• ValidSubmit 속성은 유효성 검증이 유효하면 발생되는 이벤트이고, OnInvalidSubmit 속성은 유효성 검증이 유효하기 않을 떄 발생되는 이벤트 입니다.

OnInvalidSubmit 이벤트 핸들러 작성

• 다음은 OnInvalidSubmit 속성에 적용되는 이벤트 핸들러 코드를 작성해 보도록 하겠습니다.
• 위에서 현재 OnInvalidSubmit="@HandleInvalidSubmit" 위와 같이 이벤트 핸들러의 이름을 HandleInvalidSubmit 라고 지정하였습니다.
• 해당 이벤트 핸들러는, StatusMessage 값을 string.Empty 로 지정해주는 역할을 합니다.
• 즉, 유효성 검사가 진행되고 StatusMessage 가 출력된 후 만약 유효하지 않은 값을 입력하여 유효성 Summary 값이 표시되면 StatusMessage 가 사라지도록 하는 역할입니다.

protected void HandleInvalidSubmit()
{
    StatusMessage = string.Empty;
}

전체 코드

• 다음은 Create.razor 프로젝트의 전체 소스 코드 입니다.

@page "/Candidates/Create"
@using BeomBeomJoJoBlazor.Models.Candidates
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<CandidateAppDbContext> _ContextFactory

<PageTitle>Candidate Create</PageTitle>

<h1>Create</h1>

<hr />

@if (!String.IsNullOrEmpty(StatusMessage))
{
    var statusMessageClass = StatusMessage.StartsWith("Error") ? "danger" : "sueccess";
    <div class="alert alert-@statusMessageClass alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert"
        aria-label="Close"><span aria-hidden="true">&times;</span></button>
        @StatusMessage
    </div>
}

<div class="row">
    <div class="col-md-4">
        @if (Model is not null)
        {
            <EditForm Model="@Model" OnValidSubmit="FormSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
                <DataAnnotationsValidator />
                <ValidationSummary />
                <div class="form-group">
                    <label class="control-label" for="FirstName">FirstName</label>
                    <InputText @bind-Value="Model.FirstName" id="firstname" class="form-control" placeholder="Enter FirstName" />
                    <ValidationMessage For="() => Model.FirstName" />
                </div>
                <div class="form-group">
                    <label class="control-label" for="LastName">LastName</label>
                    <InputText @bind-Value="Model.LastName" id="lastname" class="form-control" placeholder="Enter LastName" />
                    <ValidationMessage For="() => Model.LastName" />
                </div>
                <div class="form-group form-check">
                    <label class="form-check-label" for="IsEnrollment">
                        <InputCheckbox @bind-Value="Model.IsEnrollment" id="IsEnrollment" class="form-check-input" />
                        Is Enrollment
                    </label>
                </div>
                <div class="form-group">
                    <input type="submit" value="Create" class="btn btn-primary"
                        disabled="@Busy"/>
                </div>

                <input name="IsEnrollment" type="hidden" value="false" />
            </EditForm>
        }
    </div>
</div>

<div>
    <a href="/Candidates">Back to List</a>
</div>

@code {
    public Candidate? Model { get; set; }

    public string? StatusMessage { get; set; }

    public bool Busy { get; set; }

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

    protected async Task FormSubmit()
    {
        // 중복 저장 방지
        if(Busy)
            return;

        Busy = true;

        try
        {
            if (Model is not null)
            {
                Model.Age = 0;

                using (var context = _ContextFactory.CreateDbContext())
                {
                    context.Candidates.Add(Model);
                    await context.SaveChangesAsync();

                    Model = new();
                }

                StatusMessage = "Success";
            }
        }
        catch
        {
            StatusMessage = "Error";
        }
        finally
        {
            Busy = false;
        }
    }

    protected void HandleInvalidSubmit()
    {
        StatusMessage = string.Empty;
    }
}

실행 결과

• 정상적으로 실행 하였을 때, StatusMessage 가 Success 로 표시됩니다.
• 그리고 유효하지 않은 값이 있으면, OnInvalidSubmit 이벤트의 HandleInvalidSubmit() 메서드가 콜백되어 StatusMessage 값을 string.Empty 로 하여 상태표시 메시지 창이 보이지 않는 것을 확인할 수 있습니다.