title: Post Error From Angular to Net Core HTTP 404
body: <p>I'm creating a fullstack web software and i'm using Angular,Net Core and Mssql...My web api is ready and if i use Postman,there is not any problem. I can list all products at my Bootstrap table on WebPage. But if send informations from Angular(angular form), it gives an error. <strong>&quot;The JSON value could not be converted to System.Int32&quot;</strong> It looks like type casting error. I changed validation rule from <code>categoryId: [&quot;&quot;, Validators.required</code>] to <code>categoryId: [parseInt(&quot;&quot;), Validators.required]</code> or <code>categoryId: [0, Validators.required]</code> My model variable type is number.I didnt understand. Thanks in advance...</p>
  <p>My entire project at Github: <a href="https://github.com/SuperSayiyajin/FullStack_Workshop/tree/main/Northwind_Final" rel="nofollow noreferrer">https://github.com/SuperSayiyajin/FullStack_Workshop/tree/main/Northwind_Final</a></p>
  <p><a href="https://i.stack.imgur.com/WqYYb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WqYYb.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/fad2J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fad2J.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/w9sJv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w9sJv.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/fXyRN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fXyRN.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/BctdJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BctdJ.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/2gHUL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2gHUL.png" alt="enter image description here" /></a></p>
  <p><strong>This is my Net Core WebApi controller method:</strong></p>
  <pre><code>[HttpPost(&quot;add&quot;)]
  public IActionResult Add(Product p)
  {
      var result = _productService.Add(p);
      if (result.Success)
      {
          return Ok(result);
      }
      return BadRequest(result);
  }
  </code></pre>
  <p><strong>This is my product-add module:</strong></p>
  <pre><code>import { ToastrService } from 'ngx-toastr';
  import { ProductService } from './../../services/product.service';
  import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder, FormControl, Validators } from &quot;@angular/forms&quot;;
  
  @Component({
      selector: 'app-product-add',
      templateUrl: './product-add.component.html',
      styleUrls: ['./product-add.component.css']
  })
  export class ProductAddComponent implements OnInit {
      addProductForm: FormGroup;
      constructor(private formBuilder: FormBuilder,
          private productService: ProductService,
          private toastrService: ToastrService) { }
  
      ngOnInit(): void {
          this.createAddProductForm();
      }
  
      createAddProductForm() {
          this.addProductForm = this.formBuilder.group({
              productName: [&quot;&quot;, Validators.required],
              categoryId: [&quot;&quot;, Validators.required],
              unitsInStock: [&quot;&quot;, Validators.required],
              unitPrice: [&quot;&quot;, Validators.required],
          });
      }
  
      addProduct() {
          if (this.addProductForm.valid) {
              let product = Object.assign({}, this.addProductForm.value);
              this.productService.addProduct(product).subscribe(response =&gt; {
                  console.log(response);
                  this.toastrService.success(response.message, &quot;Completed&quot;)
              }, responseError =&gt; {
                  console.log(responseError.error);
                  this.toastrService.error(responseError.error);
              });
          } else {
              this.toastrService.error(&quot;Product is not valid&quot;, &quot;Error&quot;);
          }
  
          //console.log(product);
      }
  }
  </code></pre>
  <p><strong>This is my product service.</strong></p>
  <pre><code>import { ResponseModel } from './../Models/responseModel';
  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  import { ListResponseModel } from '../Models/listResponseModel';
  import { Product } from '../Models/product';
  
  @Injectable({
      providedIn: 'root',
  })
  export class ProductService {
      apiURL = 'https://localhost:44324/api/';
  
      constructor(private httpClient: HttpClient) { }
  
      getProducts(): Observable&lt;ListResponseModel&lt;Product&gt;&gt; {
          let newPath = this.apiURL + 'products/getall';
          return this.httpClient.get&lt;ListResponseModel&lt;Product&gt;&gt;(newPath);
      }
  
      getProductsByCategoryId(
          categoryId: number
      ): Observable&lt;ListResponseModel&lt;Product&gt;&gt; {
          let newPath =
              this.apiURL + 'products/getallbycategoryid?categoryId=' + categoryId;
          return this.httpClient.get&lt;ListResponseModel&lt;Product&gt;&gt;(newPath);
      }
  
      addProduct(product: Product): Observable&lt;ResponseModel&gt; {
          return this.httpClient.post&lt;ResponseModel&gt;(this.apiURL + &quot;products/add&quot;, product);
      }
  }
  </code></pre>
  <p><strong>This is product-add.html</strong></p>
  <pre><code>&lt;div class=&quot;content&quot;&gt;
      &lt;div class=&quot;col-md-12&quot;&gt;
          &lt;div class=&quot;card&quot;&gt;
              &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h5 class=&quot;title&quot;&gt;Add Product&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;form [formGroup]=&quot;addProductForm&quot;&gt;
                      &lt;div class=&quot;mb-3&quot;&gt;
                          &lt;label class=&quot;Labels&quot; for=&quot;productName&quot;&gt;Product Name&lt;/label&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;input class=&quot;col-9&quot; type=&quot;text&quot; id=&quot;productName&quot; formControlName=&quot;productName&quot;
                                  class=&quot;form-control&quot; placeholder=&quot;Product Name&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;mb-3&quot;&gt;
                          &lt;label class=&quot;Labels&quot; for=&quot;categoryId&quot;&gt;Product Category&lt;/label&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;input type=&quot;text&quot; id=&quot;categoryId&quot; formControlName=&quot;categoryId&quot; class=&quot;form-control&quot;
                                  placeholder=&quot;Category Id&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;mb-3&quot;&gt;
                          &lt;label class=&quot;Labels&quot; for=&quot;unitsInStock&quot;&gt;Product Stock&lt;/label&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;input type=&quot;text&quot; id=&quot;unitsInStock&quot; formControlName=&quot;unitsInStock&quot; class=&quot;form-control&quot;
                                  placeholder=&quot;Stock&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;mb-3&quot;&gt;
                          &lt;label class=&quot;Labels&quot; for=&quot;unitPrice&quot;&gt;Product Price&lt;/label&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;input type=&quot;text&quot; id=&quot;unitPrice&quot; formControlName=&quot;unitPrice&quot; class=&quot;form-control&quot;
                                  placeholder=&quot;Price&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-footer&quot;&gt;
                  &lt;button class=&quot;btn btn-fill btn-primary&quot; (click)=&quot;addProduct()&quot;&gt;Add Product&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>