Validation errors required Angular (frontend) and ASP.NET (backend) - asp.net

Question

I am trying to create a new instance of a model from Angular with an ASP.NET backend. However I am facing validation errors saying that the fields are required.
This is what I have tried - template :
<h1>Add employee : </h1>
<form [formGroup]="form">
<label for="EmployeeName">Employee Name : </label>
<input type="text" formControlName="EmployeeName">
<label for="Department">Employee Department: </label>
<input type="text" formControlName="Department">
<label for="DateOfJoining">Date of joining : </label>
<input type="date" formControlName="DateOfJoining">
<label for="fileimage">Main image</label>
<input type="file" accept="image/*" fomrControlName="fileimage" (change)="onImageUpload($event)">
<button (click)="onSubmit()">Create Employee</button>
</form>
This is the Angular component:
ngOnInit(): void {
this.form=this.formBuilder.group({
EmployeeName:[''],
Department:[''],
DateOfJoining:[''],
fileimage:['', Validators.required]
})
}
onImageUpload(event) {
const file = event.target.files[0];
if (file) {
this.form.patchValue({fileimage:file});
this.form.get('fileimage').updateValueAndValidity();
const fileReader = new FileReader();
fileReader.onload = ()=> {
this.imageDisplay=fileReader.result;
};
fileReader.readAsDataURL(file);
}
}
onSubmit() {
const Employee : Employee = {
EmployeeName:this.form.get('EmployeeName').value,
Department:this.form.get('Department').value,
};
this.imageService.createEmployee(Employee, this.form.get('fileimage').value).subscribe(
()=>{
console.log("Employee Created")
},
()=>{
console.log("Error in Employee Creation")
}
);
}
This is the service I am working with :
createEmployee(employee:Employee, file:File):Observable<ArrayBuffer>{
let headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=<calculated when request is sent>');
const options = {
headers: new HttpHeaders({
'Content-Type': 'multipart/form-data;boundary=<calculated when request is sent>'
}),
body: {}
}
return this.http.post<ArrayBuffer>(`${this.apiURLEmployee}`, {employee, file}, options)
}
And finally this is my backend endpoint :
public IActionResult Post([FromForm]Employee emp, IFormFile file)
{
MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));
int LastEmployeeId = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable().Count();
emp.EmployeeId = LastEmployeeId + 1;
string wwwRootPath = _hostEnvironment.WebRootPath;
if (file != null)
{
string filename = Guid.NewGuid().ToString();
var uploads = Path.Combine(wwwRootPath, #"images\employee");
var extension = Path.GetExtension(file.FileName);
Uri domain = new Uri(Request.GetDisplayUrl());
if (emp.PhotoFileName != null)
{
var oldImagePath = Path.Combine(wwwRootPath, emp.PhotoFileName.TrimStart('/'));
if (System.IO.File.Exists(oldImagePath))
{
System.IO.File.Delete(oldImagePath);
}
}
using (var fileStreams = new FileStream(Path.Combine(uploads, filename + extension), FileMode.Create))
{
file.CopyTo(fileStreams);
}
emp.PhotoFileName = domain.Scheme + "://" + domain.Host + (domain.IsDefaultPort ? "" : ":" + domain.Port) + "/images/employee/" + filename + extension;
}
dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").InsertOne(emp);
return Json("Employee added successfully");
}
The validation errors are from the backend. Here is the error :
Error Image
Request
Payload