[Blazor] EditForm OnInvalidSubmit 속성 사용하기
- 웹 프로그래밍/Blazor
- 2022. 10. 30. 22:38
개요
- 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">×</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 로 하여 상태표시 메시지 창이 보이지 않는 것을 확인할 수 있습니다.
728x90
'웹 프로그래밍 > Blazor' 카테고리의 다른 글
[Blazor] PagIndex 속성 추가 및 Skip 과 Take 메서드로 페이징 처리 (1) | 2022.11.06 |
---|---|
[Blazor] 재사용 컴포넌트 만들기 (0) | 2022.11.02 |
[Blazor] Text 중복 입력 방지 (0) | 2022.10.30 |
[Blazor] EditForm에 OnValidSubmit event 사용하기 (0) | 2022.10.30 |
[Blazor] ValidationMessage 컴포넌트 사용하여 유효성 검사 방법 (0) | 2022.10.30 |
이 글을 공유하기