400 bad request "Error converting value {null} to type 'System.Int32'. Path 'id', line 1, position 10." POST request

Question

Im new to Angular and REST API. Im getting a 400 bad request reaponse when i do a POST request to my API from Angular front end.

HTML

<form #typeform="ngForm" (submit)="onSubmit(typeform)" autocomplete="off">
<input type="hidden" name="id" #id="ngModel" [(ngModel)]="service.typeFormData.id">
<div class="form-group">
    <label>Type</label>
    <input name="Type" #Type="ngModel" [(ngModel)]="service.typeFormData.Type" class=form-control required>
    <div class="validation-error" *ngIf="Type.invalid && Type.touched">This Field is Required</div>
</div>
<div class="form-group">
    <button type="submit" [disabled]="typeform.invalid" class="btn btn-lg btn-block">Submit</button>
</div>

Service

    import { Injectable } from '@angular/core';
    import { Nctype } from './nctype.model';
    import { HttpClient } from '@angular/common/http';

    @Injectable({
    providedIn: 'root'
    })
    export class NctypeService {

      typeFormData: Nctype;
      list: Nctype[];
      readonly rootURL = "https://localhost:44322/api"

      constructor(private http: HttpClient) { }

      postType(typeFormData: Nctype) {
      return this.http.post(this.rootURL+'/NCType', typeFormData);
      }

      refreshList(){
       this.http.get(this.rootURL+'/NCType')
        .toPromise().then(res => this.list = res as Nctype[]);
      }

      putType(typeFormData: Nctype) {

        return this.http.put(this.rootURL+'/NCType/'+typeFormData.id, typeFormData);
      }

      deleteType(id: number) {
        return this.http.delete(this.rootURL+'/NCType/'+id);
      }
    }

component.ts

import { Component, OnInit } from '@angular/core';
import { NctypeService } from 'src/app/shared/nctype.service';
import { ToastrService } from 'ngx-toastr';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-nctype-create',
  templateUrl: './nctype-create.component.html',
  styleUrls: ['./nctype-create.component.css']
})
export class NctypeCreateComponent implements OnInit {

  constructor(public service: NctypeService,
    private toastr: ToastrService) { }

  ngOnInit(){
    this.resetForm();
  }

  resetForm(typeform?: NgForm) {
    if(typeform != null)
    typeform.resetForm();
    this.service.typeFormData = {
      id: null,
      Type: ''
    }
  }

  onSubmit(typeform: NgForm) {
    if(typeform.value.id == null)
    this.insertRecord(typeform);
    else
    this.updateRecord(typeform);
  }

  insertRecord(typeform: NgForm) {
    this.service.postType(typeform.value).subscribe(res => {
      this.toastr.success('Inserted Successfully', 'NC Log');
      this.resetForm(typeform);
      this.service.refreshList();
    });
  }

  updateRecord(typeform: NgForm) {
    this.service.putType(typeform.value).subscribe(res => {
      this.toastr.info('Updated Successfully', 'NC Log');
      this.resetForm(typeform);
      this.service.refreshList();
    });
  }

}

model

export class Nctype {

    id: number;
    Type: string;

}

PUT, and DELETE are working fine. Wonder if anyone has any ideas what i might be doing wrong, or help me better understand the error. If i comment out the second line of my HTML, the POST works, but then PUT behaves as if its a POST request. Error

Error

Error with data logged to console

Answer 1

Error code 400 from the backend is a valid error. HTTP status code 400 means, one or more property of your input is not valid which is making the request to be invalid to process. Let's take below Model as an example for your backend

 public class CuisineViewModel
    {
        public int Id { get; set; }
        [Required]
        [MinLength(5), MaxLength(25)]
        public string Name { get; set; }
        [Required]
        [MinLength(10), MaxLength(1000)]
        public string Description { get; set; }
        public bool IsActive { get; set; }
    }

In this, if you do not pass a string with more than 10 characters for Description property then you will get 400 error (Bad Request) from your backend.

In your case, the Nctype model in your backend should have some required property set. If you do not pass the required information in the properties of your Nctype model, you will get HTTP Status code 400.

Log the data in your service and see what you are passing to the backend.

postType(typeFormData: Nctype) {
console.log(JSON.stringify(typeFormData));
      return this.http.post(this.rootURL+'/NCType', typeFormData);
      }

You are sending null value for the field Id that is why it is throwing you 400 error messages. I have highlighted in the image. For post-call, Id property cannot have value. However, because of the binding, Id will be expected. You have two options to solve this issue.

1. Send 0 (Zero) for the id property when you call the Post method.

postType(typeFormData: Nctype) {
       typeFormData.id = 0;
      return this.http.post(this.rootURL+'/NCType', typeFormData);
      }

2. You should use a separate Model that should not have Id in your Server-side API. This will help you not to send id value in your POST call.