Blazor EditForm的InputNumber输入int值报错且校验功能失效问题求助

该错误触发的根本原因是数值类型的Quantity字段被应用了仅支持字符串、数组、集合类型的验证规则，或是属性本身的类型定义不符合预期，导致验证逻辑判定数值输入不符合要求。

• 修正Product实体类定义 #

  1. 确认Quantity属性类型为int（允许为空可定义为int?），不要定义为数组、集合、字符串类型
  2. 删除Quantity上所有仅适用于字符串/集合的验证特性，包括[MinLength]、[MaxLength]、[StringLength]，数值类型的范围验证请使用[Range]特性
     正确的实体类示例：

  public class Product
  {
      public int Id { get; set; }
      [Required(ErrorMessage = "产品名称不能为空")]
      public string ProductName { get; set; }
      public string Unit { get; set; }
      [Range(1, int.MaxValue, ErrorMessage = "数量必须大于等于1")]
      public int Quantity { get; set; }
      [Range(0.01, double.MaxValue, ErrorMessage = "单价必须大于0")]
      public decimal UnitPrice { get; set; }
      public string Category { get; set; }
  }
  

• 确保绑定实例正确初始化 #

  在razor页面的@code代码块中提前初始化product实例，不要留空值：

  @code {
      // 提前初始化实例，避免绑定空对象
      private Product product = new Product();
      private List<Product>? products;
  
      private void HandleAdd()
      {
          // 此处写新增数据到数据库的逻辑
      }
  }
  

• 显式指定InputNumber泛型类型 #

  .NET 6及更早版本的Blazor存在泛型类型自动推断失败的问题，显式声明TValue即可解决：

  <InputNumber TValue="int" min="1" step="1" placeholder="Quantity" id="Quantity" @bind-Value="@product.Quantity" />
  

• 修复验证状态样式不显示问题 #

  输入框的合法/非法状态样式依赖Blazor默认CSS，确认项目入口文件已引入对应样式：

  • Blazor Server项目检查Pages/_Layout.cshtml
  • Blazor WebAssembly项目检查wwwroot/index.html
    确保存在以下样式引入代码：

  <link href="_content/Microsoft.AspNetCore.Components.WebAssembly.Vendor/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="{你的项目名}.styles.css" rel="stylesheet" />
  

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