[Blazor] Required 항목 Disable 처리하기

Model에 Requied로 정의한 경우 화면에서 유효성검사(Validation)를 통해 필수 항목 입력여부를 확인할 수 있습니다.

그런데 특정한 경우 Required 항목임에도 제외하고 싶은 경우가 있습니다.

이때 처리하는 방법입니다.

아래 화면에서 보듯이 Requried 로 되어있는 항목은 유효섬 검사를 통해 화면에 아래처럼 표시됩니다.

 Introdution 항목으로 필수 여부를 Disable 처리하는 방법입니다.

ChangeableRequired.cs

using System.ComponentModel.DataAnnotations;

namespace Blazor.AppTest.Common
{
    public class ChangeableRequired : RequiredAttribute
    {
        public bool Disabled { get; set; }

        public override bool IsValid(object value)
        {
            if (Disabled)
            {
                return true;
            }

            return base.IsValid(value);
        }
    }
}

RequriedCheckModel.cs

using Blazor.AppTest.Common;

using System.ComponentModel.DataAnnotations;

namespace Blazor.AppTest.Data
{
    public class RequriedCheckModel
    {
        [Required]
        [StringLength(10, ErrorMessage = "Name is too long.")]
        public string? Name { get; set; }
        [Required]
        [Range(1, 100)]
        public int Age { get; set; }
        [ChangeableRequired]
        public string Introduction { get; set; }
        [Required]
        public Gender Gender { get; set; } = Gender.Male;
    }
}

위처럼 Requried 를 ChangeableRequired로 변경합니다.

화면정의
RequiredTest.razor

@page "/requiredtest"

<h3>Required Test</h3>

@using Blazor.AppTest.Common;
@using Blazor.AppTest.Data
@using System.ComponentModel;

<EditForm Model="@requriedCheckModel" OnValidSubmit="@HandleValidSubmit">
    <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="requriedCheckModel.Name" />
            <ValidationMessage For="@(() => requriedCheckModel.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="requriedCheckModel.Age" />
            <ValidationMessage For="@(() => requriedCheckModel.Age)" />
        </div>
    </div>

    <div class="form-group row">
        <label for="Introduction" class="col-sm-2 col-form-label">
            Introduction
        </label>
        <div class="col-sm-10">
            <InputText id="Introduction" class="form-control" placeholder="Introduction"
                         @bind-Value="requriedCheckModel.Introduction" />
            <ValidationMessage For="@(() => requriedCheckModel.Introduction)" />
        </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="requriedCheckModel.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>

</EditForm>

@code {

    private RequriedCheckModel requriedCheckModel = new();

    protected override void OnInitialized()
    {
        PropertyDescriptor? descriptor = TypeDescriptor.GetProperties(requriedCheckModel.GetType())["Introduction"];

        if (descriptor != null)
        {
            ChangeableRequired? attribute = (ChangeableRequired?)descriptor.Attributes[typeof(ChangeableRequired)];
            if (attribute != null)
            {
                attribute.Disabled = true;
            }
        }

        base.OnInitialized();
    }

    private void HandleValidSubmit()
    {
        Console.WriteLine("HandleValidSubmit");
    }
}

위처럼 OnInitialized 에서 Disabled = true로 하게 되면 Required  항목에서 제외되어
아래처럼 Introduction 항목을 입력하지 않았지만 유효성검사 메세지가 표시되지 않습니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/blob/master/Blazor.AppTest/Pages/RequiredTest.razor

GitHub - kei-soft/Blazor.AppTest