ASP.NET Core Web API receive request body containing IFormFile but all properties are null from Angular

I am trying to send a request body which is an object from Angular to ASP.NET Core Web API. All the properties are showing null except ID.

Web API:

public class Book
{
    public int BookID { get; set; }
    public string? ISBNNo { get; set; }
    public string? BookName { get; set; }
    public decimal? Price { get; set; }
    public string? AuthorName { get; set; }
    public string? BookImage { get; set; }
    public string? OperationMode { get; set; }
    public IFormFile? FormFile { get; set; }
}

In Angular, this is my class:

Component:

postdata(angBook: any) {
  if (this.angBook.valid) {
    const UIFormData: Book = this.angBook.value;
    const formFileData = new FormData();
    if (!UIFormData.BookID) {
      UIFormData.OperationMode = "ADD";
      UIFormData.BookID = 0;      
    } else {
      UIFormData.OperationMode = "EDIT";
    }

    if (this.file) {
      formFileData.append("file", this.file, this.file.name);
      UIFormData.FormFile = formFileData;              
      UIFormData.BookImage= this.file.name;
    }
    this.dataService.ObjBookAddModify(UIFormData);
  }
}

Angular service:

/**** To send Data to DB through Object */
public ObjBookAddModify(BookParameter: Book) {
  var headers = new HttpHeaders({
    "Content-Type": "application/json; charset=utf-8",
    "Accept": "application/json"
  });
  
  this.httpClient.post<any>(this.baseUrl + '/Books', JSON.stringify(BookParameter),{
    headers: headers})
    .subscribe();
}

The ASP.NET Core controller object shows all properties null except BookID (0).

Request Payload in Network:

{
  "BookID": 0, 
  "ISBNNo": "ISBN 0-091-96234-1", 
  "BookName": "You Become What You think", 
  "AuthorName": "Shubham Kumar Singh", 
  "Price": "23", 
  "BookImage": "galaxyInterio2.jpg", 
  "OperationMode": "ADD", 
  "FormFile":  {}
}

What am I doing wrong? Please help me.

You are not posting the form data correctly to your API. As currently you are sending the request body as JSON ("Content-Type": "application/json") but your API expects the request with "Content-Type": "multipart/form-data".

postdata(angBook: any) {
  if (this.angBook.valid) {
    const UIFormData: Book = this.angBook.value;

     if (!UIFormData.BookID) {
       UIFormData.OperationMode = "ADD";
       UIFormData.BookID = 0;      
     } else {
       UIFormData.OperationMode = "EDIT"
     }

     if (this.file) {
       UIFormData.FormFile = this.file;              
       UIFormData.BookImage = this.file.name;
     }

     this.dataService.ObjBookAddModify(UIFormData);
  }
}

With below, the HTTP request will be sent with "Content-Type": "multipart/form-data" as default.

public ObjBookAddModify(BookParameter: Book) {
  let formData = new FormData();

  for (k in BookParameter) {
    formData.append(k, BookParameter[k]);
  }
  
  this.httpClient.post<any>(this.baseUrl + '/Books', formData)
    .subscribe();
}