C# Blazor EditContext 를 이용해 Validation 처리하기

Blazor EditContext 를 이용해 Validation 처리하기

 

입력 내용에 대한 Validation 을 할때 경우에 따라 Validation 을 무시해야할 때도 있습니다.

이때 EditContext 를 이용하면 원할때 Validation 하도록 할수 있습니다.

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

EditContextTest.razor

@page "/editcontexttest"
<h3>EditContext Test</h3>

@using Blazor.AppTest.Data

<EditForm EditContext="@editContext" OnSubmit="@Submit">
    <DataAnnotationsValidator />

    <div class="form-group row">
        <label for="Name" class="col-sm-2 col-form-label">
            Name
        </label>
        <div class="col-sm-10">
            <InputText id="Name" class="form-control" placeholder="Name"
                       @bind-Value="exampleModel.Name" />
            <ValidationMessage For="@(() => exampleModel.Name)" />
        </div>
    </div>

    <div class="form-group row">
        <label for="Age" class="col-sm-2 col-form-label">
            Age
        </label>
        <div class="col-sm-10">
            <InputNumber id="Age" class="form-control" placeholder="Age"
                         @bind-Value="exampleModel.Age" />
            <ValidationMessage For="@(() => exampleModel.Age)" />
        </div>
    </div>

    <div class="form-group row">
        <label for="gender" class="col-sm-2 col-form-label">
            Gender
        </label>
        <div class="col-sm-10">
            <InputSelect @bind-Value="exampleModel.Gender" class="form-control">
                @foreach (var gender in Enum.GetValues(typeof(Gender)))
                {
                    <option value="@gender">@gender</option>
                }
            </InputSelect>
        </div>
    </div>

    <br /><br />

    <button type="submit">Submit</button>
    <InputCheckbox @bind-Value="@isValidation"/> Validation
</EditForm>

@code {
    private ExampleModel exampleModel = new();
    private EditContext? editContext;
    private bool isValidation = false;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);

        base.OnInitialized();
    }

    private void Submit()
    {
        Console.WriteLine("Submit");
        var messageStore = new ValidationMessageStore(editContext);
        messageStore.Clear();
        if (isValidation)
        {
            Console.WriteLine("Valid : " + editContext.Validate());
        }
        else
        {

        }
    }
}

위 코드를 보면 알수 있듯이 EditContext 에 Validation 할 Model 을 지정합니다.

Submit 메서드에서 validation 체크박스가 체크된 경우만 Validate 메서드를 호출하도록 하면 됩니다.

EditForm 을 이용하면 핸들링이 불가능 하지만 EditContext 에서는 핸들링이 가능한 것입니다.

 

아래 그림을 보면 알수 있지만 Validtion 체크박스를 체크하지 않으면 유효성 체크를 하지 않고

체크하게되면 유효성 검사가체크되는 걸 확인 할수 있습니다.