Angular表单提交至.NET Core WebAPI报错JSON值无法转System.Int32

问题根因 #

这个报错是因为Angular响应式表单从type="text"输入框读取到的数值类字段都是字符串格式，提交到.NET后端接口时，后端Product类对应的categoryId、unitsInStock是System.Int32类型、unitPrice是数值类型，JSON反序列化时无法将字符串格式的数字转换为对应的数值类型，因此抛出转换错误。

你之前修改表单初始值的尝试没有生效，是因为初始值仅作用于表单初始化阶段，用户在文本输入框输入内容后，表单控件的值会自动重置为字符串类型，因此无法解决类型不匹配的问题。

解决方案 #

你可以任选以下两种方案修复：

方案1：提交前手动做类型转换 #

修改product-add组件的addProduct方法，在提交前把表单的字符串值转成对应数值类型：

addProduct() {
    if (this.addProductForm.valid) {
        const formVal = this.addProductForm.value;
        // 手动转换字段类型
        const product = {
            productName: formVal.productName,
            categoryId: parseInt(formVal.categoryId),
            unitsInStock: parseInt(formVal.unitsInStock),
            unitPrice: parseFloat(formVal.unitPrice)
        };
        this.productService.addProduct(product).subscribe(response => {
            console.log(response);
            this.toastrService.success(response.message, "Completed")
        }, responseError => {
            console.log(responseError.error);
            this.toastrService.error(responseError.error);
        });
    } else {
        this.toastrService.error("Product is not valid", "Error");
    }
}

方案2：修改输入框类型为数值类型 #

直接修改product-add页面模板的输入框属性，让表单默认获取数值类型的值，无需手动转换：

<!-- 分类ID输入框 -->
<input type="number" id="categoryId" formControlName="categoryId" class="form-control" placeholder="Category Id" />
<!-- 库存输入框 -->
<input type="number" id="unitsInStock" formControlName="unitsInStock" class="form-control" placeholder="Stock" />
<!-- 单价输入框，加step属性支持小数 -->
<input type="number" step="0.01" id="unitPrice" formControlName="unitPrice" class="form-control" placeholder="Price" />

修改后表单提交的数值类字段会默认是number类型，和后端要求的类型匹配即可正常请求。

内容的提问来源于stack exchange，提问作者Burak İbrahim Ünal