How do i send an object from Angular to an Asp.net Web Api?

Question

I have the exception in my Web Api

Object reference not set to an instance of an object.

The data in the object is printed on to the console but it is not passed to the Api Controller. The object ae s "null"

This is my controller:

[Route("api/AddMovie")]
[HttpPost]
public int AddMovie([FromBody]Movie movie)
{
   int check = objMovie.AddMovie(movie);
   return check;
}

AddMovie is the function i created to store data in database.

This is my component:

import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { slideInOutAnimation } from 'src/app/animations';
import { Movie } from 'src/app/movie';
import { NgxSpinnerService} from 'ngx-spinner';
import { MovieServiceService } from 'src/app/Service/movie-service.service';
import { HttpClient } from '@angular/common/http';
import { formatNumber } from '@angular/common';

@Component({
  selector: 'app-addmovie',
  templateUrl: './addmovie.component.html',
  styleUrls: ['./addmovie.component.css'],
  // make slide in/out animation available to this component
  animations: [slideInOutAnimation],

  // attach the slide in/out animation to the host (root) element of this component
  // tslint:disable-next-line: no-host-metadata-property
  host: { '[@slideInOutAnimation]': '' }
})
export class AddmovieComponent implements OnInit {

  // tslint:disable-next-line: new-parens
  movie = new Movie;
  fileData: File = null;
  addMovieForm: FormGroup;


  constructor( 
    private spinner: NgxSpinnerService,
    public fb: FormBuilder,
    private http: HttpClient,
    public movieService: MovieServiceService) {
    this.addMovieForm = this.fb.group ({
      movieName: new FormControl('', [Validators.required, Validators.minLength(1)]),
      releaseDate: new FormControl('', [Validators.required]),
      releaseYear: new FormControl('' , [Validators.required]),
      certification: new FormControl('' , [Validators.required]),
      runtime: new FormControl('', [Validators.required]),
      rating: new FormControl('', [Validators.required, Validators.max(10)]),
      moviePlot: new FormControl('', [Validators.required, Validators.minLength(1)]),
      cast: new FormControl('', [Validators.required, Validators.minLength(1)]),
      imageName: new FormControl('', [Validators.required])
    });
  }

  ngOnInit() {
  }

  onFileSelect(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.addMovieForm.get('imageName').setValue(file);
    }
  }
  public onSubmit() {
    debugger;
    // tslint:disable-next-line: prefer-const
    let movieForm = this.addMovieForm.value;
    this.movie.movieName = movieForm.movieName;
    this.movie.releaseDate = movieForm.releaseDate;
    this.movie.releaseYear = movieForm.releaseYear;
    this.movie.certification = movieForm.certification;
    this.movie.runtime = movieForm.runtime;
    this.movie.review = movieForm.rating;
    this.movie.moviePlot = movieForm.moviePlot;
    this.movie.cast = movieForm.cast;
    this.movie.imageName = movieForm.imageName;
    console.log(this.movie);
    this.http.post('http://localhost:50686/api/AddMovie', this.movie).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
}
}

Answer 1

You are invoking the api call without any header. Try the following

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
this.http.post('http://localhost:50686/api/AddMovie', this.movie, httpOptions)
.subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );

Answer 2

The error says that your object Movie is null. It means that you haven't initialized your object yet or you have set it to null. In this case you can do the following,

1. To initialize the object before you use it,

    Movie movie = new Movie();

2. Check for null before you use the object instance,

    public int AddMovie([FromBody]Movie movie) { if (movie != null) { // Do something with movie } }

3. Handle the null and throw a suitable exception,

    public int AddMovie([FromBody]Movie movie) { if (movie == null) { throw new Exception("Custom exception message"); } }