[blazor] blazor EditForm 사용 하여 Annotation 설정 및 유효성 검사

강의 제목 : 9. BlazorForm_EditForm 컴포넌트를 사용하여 폼 작성 및 폼 유효성 검사 진행하기

model 생성

• [Required (ErrorMessage = "이름을 입력 해 주세요.")]
  필수로 값을 할당하도록 지정.
  errormessage는 해당 유효성을 위반 할때 출력 할 메시지
• [StringLength(10, ErrorMessage ="10자 이내로 입력 해 주세요.")]
  string의 최대 자리수 설정.
  errormessage는 해당 유효성을 위반 할때 출력 할 메시지

• ExampleModel.cs

using System.ComponentModel.DataAnnotations;

namespace BlazorApp.Models
{
    public class ExampleModel
    {
        [Required (ErrorMessage = "이름을 입력 해 주세요.")]
        [StringLength(10, ErrorMessage ="10자 이내로 입력 해 주세요.")]
        public string Name { get; set; }
    }
}

---

네비게이션 메뉴 설정

• NavMenu.razor

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="Idea">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Idea
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="TodoListInMemory">
                <span class="oi oi-list-rich" aria-hidden="true"></span> TodoListInMemory
            </NavLink>
        </div>

        <!--TodoList페이지-->
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="TodoList">
                <span class="oi oi-list-rich" aria-hidden="true"></span> TodoList
            </NavLink>
        </div>

        <!--bonus페이지-->
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="Bonus">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Bonus
            </NavLink>
        </div>

        <!--DeditForm -->
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="BlazorForm">
                <span class="oi oi-list-rich" aria-hidden="true"></span> BlazorEditForm
            </NavLink>
        </div>
        
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

---

페이지 생성

• EditForm blazor에서 제공하는 editForm
  Model => editForm에서 사용할 모델
  OnValidSubmit => submit이벤트시 실행할 메소드.
• DataAnnotationsValidator 유효성 검사
• ValidationSummary 전체 유효성 위반 메시지 출력
• ValidationMessage For 유효성 위반시 출력할 메시지 선택해서 출력

• BlazorForm.razor

@page "/BlazorForm"
@inject IJSRuntime js

<h3>BlazorForm</h3>

@*OnValidSubmit submit이 발생했을때 실행할 메소드 지정.
    Model editform에서 사용할 모델 설정.
*@
<EditForm Model="@exampleModel" OnValidSubmit="OnSubmit">
    @*
        DataAnnotationsValidator => 유효성 검사
        ValidationSummary 유효성 위반시 출력할 메시지 summary
        ValidationMessage For 유효성 위반시 출력할 메시지 설정.
    *@
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary></ValidationSummary>
    <InputText id="Text" @bind-Value=exampleModel.Name ></InputText>
    <ValidationMessage For="@(() => exampleModel.Name)"></ValidationMessage>

    <button type="submit">완료</button>
</EditForm>
<hr />

@code {
    ExampleModel exampleModel = new ExampleModel();

    private void OnSubmit()
    {
        js.InvokeAsync<object>("alert", $"제이름은 : {exampleModel.Name} 입니다.");
    }
}

• 실행 페이지
  

• DataAnnotationsValidator만 설정 했을때 Required 어노테이션에 의해 값이 설정 되지
  않아 input 테그에 적색으로 유효성 위반 표시
  

• ValidationSummary 추가 후
  Required에 errormessage를 따로 설정 하지 않아 기본 메시지 출력
  

• Required에 errormessage를 추가하여 커스텀 에러 메시지 출력
  

• ValidationMessage 를 추가하여 input테그 아래 에러 메시지 출력
  

• 유효성 통과.