Невозможно отправить изображение вместе с моими данными формы. Угловой клиент показывает код состояния: 422 с необработанной записью.

Question

Я пытаюсь отправить изображение вместе с формой запроса, содержащей некоторые детали, при отправке его из angular в nodejs. Это показывает ошибку со статусом 422 & Необработанный ввод. При отправке его на серверную часть nodejs отображается необработанная запись. Я не смог найти ответ на эту ошибку. Пожалуйста, помогите мне с этим.

Html Component:

<h1 class="page-header">Student Enquiry Form</h1>

<!-- Custom Success/Error Message -->
<div class="row show-hide-message">
  <div [ngClass]="messageClass">
    {{ message }}
  </div>
</div>



<div class="example-container">
  <form class="example-container" [formGroup]="form 
  (ngSubmit)="onSubmit()">
     <mat-form-field>
        <input matInput placeholder="Enter your email" 
        formControlName="email" >
        <mat-error *ngIf="form.controls['email'].errors?.email && 
        !form.controls['email'].errors?.required">
           Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="form.controls['email'].errors?.required">
           Email is <strong>required</strong>
        </mat-error>
     </mat-form-field>
     <mat-form-field>
        <input matInput placeholder="Enter your fullname" 
        formControlName="fullName" required>
     </mat-form-field>
     <mat-form-field>
       <input matInput placeholder="Enter your fathername" 
       formControlName="fatherName" required>
     </mat-form-field>

     <mat-form-field>
        <input matInput placeholder="Enter your mothername" 
        formControlName="motherName" required>
     </mat-form-field>

     <mat-form-field>
         <input  matInput placeholder="Enter your mobilenumber" 
         type="number" formControlName="mobilenumber" required>
     </mat-form-field>

<label>Gender: </label>
      <mat-radio-group formControlName="Gender">
        <mat-radio-button value="male">Male</mat-radio-button>
        <mat-radio-button value="female">Female</mat-radio-button>
        <mat-radio-button value="others">Others</mat-radio-button>
      </mat-radio-group>

  <mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
      <mat-option value="AI">AI</mat-option>
      <mat-option value="IOT">IOT</mat-option>
      <mat-option value="BlockChain">BlockChain</mat-option> 
    </mat-select>
  </mat-form-field>

  <div>
    <div>
       <input type="file" (change)="onFileChange($event)" />
    </div>
    <div class="example-button-row">
       <button type="submit" mat-button color="warn">Register</button>
    </div>
 </div>

Файл Component.ts

onFileChange(event){
this.selectedFile = <File>event.target.files[0];
    this.fd.append('file', this.selectedFile, this.selectedFile.name);
  }

onSubmit(){
    const student = {
      email: this.form.get('email').value,
      fullName: this.form.get('fullName').value,
      motherName: this.form.get('motherName').value,
      fatherName: this.form.get('fatherName').value,
      mobilenumber: this.form.get('mobilenumber').value,
    }

    this.fd.append('student', JSON.stringify(student))
    this.studentService.getDetails(this.fd).subscribe(data =>{
      console.log(data)
     this.studentDetails = data;
      if (!this.studentDetails.success) {
        this.messageClass = 'alert alert-danger'; // Set an error class
        this.message = this.studentDetails.message; // Set an error message
        } else {
        this.messageClass = 'alert alert-success'; // Set a success class
        this.message = this.studentDetails.message; // Set a success message

        this.router.navigate(['/home']);
      }
    })
  }

Service.ts

getDetails(formData){
  let headers = new HttpHeaders()
  return this.http.post(this.domain + 'authentication/register', 
  formData).map(res =>res)
}