Blazor应用中如何允许InputNumber控件输入空值？

你遇到的问题并非InputNumber不支持可空类型，而是当用户未输入内容时，提交的空字符串无法被默认类型转换逻辑解析为int?的null值，从而触发类型验证错误。以下是几种可行的解决方法：

方案1：自定义InputNumber组件处理空值 #

重写默认的InputNumber<int?>组件，添加空字符串到null的转换逻辑：

@* NullableInputNumber.razor *@
@inherits InputNumber<int?>

protected override bool TryParseValueFromString(string? value, out int? result, out string validationErrorMessage)
{
    // 空字符串或空白内容直接返回null，跳过验证
    if (string.IsNullOrWhiteSpace(value))
    {
        result = null;
        validationErrorMessage = string.Empty;
        return true;
    }

    // 非空内容使用默认解析逻辑
    return base.TryParseValueFromString(value, out result, out validationErrorMessage);
}

使用时替换原有的InputNumber控件：

<NullableInputNumber id="age" @bind-Value="Data.Age" class="form-control" />

方案2：添加自定义验证属性忽略空值转换错误 #

创建一个自定义验证属性，允许可空数字属性在值为null时通过验证：

public class AllowNullableNumberAttribute : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
        var propertyInfo = validationContext.ObjectType.GetProperty(validationContext.MemberName);
        if (propertyInfo == null) return ValidationResult.Success;

        // 检查属性是否为可空值类型
        var underlyingType = Nullable.GetUnderlyingType(propertyInfo.PropertyType);
        if (underlyingType != null && value == null)
        {
            // 可空属性且值为null时，直接通过验证
            return ValidationResult.Success;
        }

        // 其他情况沿用默认验证逻辑
        return base.IsValid(value, validationContext);
    }
}

在模型的可空数字属性上标记该特性：

[AllowNullableNumber]
public int? Age { get; set; }

方案3：通过绑定转换器直接处理空值转换 #

利用Blazor的绑定转换器功能，在绑定逻辑中显式将空字符串转换为null：

<InputNumber id="age" 
             @bind-Value="Data.Age" 
             @bind-Value:convertUsing="(string? input) => string.IsNullOrWhiteSpace(input) ? null : int.TryParse(input, out var number) ? number : null"
             class="form-control" />

这种方式无需额外创建组件或属性，直接在绑定代码中完成转换逻辑。

内容的提问来源于stack exchange，提问作者maksim