Angular saving form with image using spring boot

I was going to save registration form with image. The spring boot rest api is working in postman. Now I need to save data in Angular.

This is the spring controller class

@RestController
@RequestMapping("/patient/")
@CrossOrigin(origins = "http://localhost:4200", allowCredentials = "true")

public class PatientRegistrationController {
    @Autowired
    PatientRegistrationService registrationService;
    
    
       static String path = "F:\\patientPhoto\\"; 
    
    @PostMapping("post")
    
    @RequestParam.
    
     public void createPatient(@RequestParam("patInfo") String patInfo, @RequestParam("image") MultipartFile image)  {
        
        String fullPath =  path+image.getOriginalFilename();
        
        
         
        PatientRegistrationEntity patient = objectMapperReadValue(patInfo,PatientRegistrationEntity.class);
        
         
        
            try {
                
                image.transferTo(new File(fullPath)); //save to pc hdd
                
            } catch (IllegalStateException e) {
                 
                e.printStackTrace();
            } catch (IOException e) {
                 
                e.printStackTrace();
            }
    
        patient.setPatinetPhotoPaht(fullPath); //save path name to database
        
     registrationService.savepatient(patient);

       
   } }
        

this is the Angular service class

export class PatientServiceService {
private api = "http://localhost:8080";

  constructor(private http: HttpClient) { }

  public getpatinetList(): Observable<patientIface[]>{
    return this.http.get<patientIface[]>(`${this.api}/patient/post`);
  }

  private _refreshNeeds = new Subject<void>();

  get refreshNeeds(){
    return this._refreshNeeds;
  }

  public addPatient(patientRegistration: patientIface, image:File): Observable<patientIface>{
    const patInfo = JSON.stringify(patientRegistration); 
    console.log(typeof patInfo);

    const formData = new FormData();
    formData.append('patInfo', patInfo);
    formData.append('image', image);
    
    return this.http.post<patientIface>(`${this.api}/patient/post`, formData).pipe(
      tap( () => {
        this._refreshNeeds.next();
      }
      )
    );
  }

And this is the module.ts file

  createpatient() {
    // console.log(this.patientForm.value.dateOfBirth.toLocaleDateString());
    
    
    this.patientForm.value.dateOfBirth = this.patientForm.value.dateOfBirth?.toLocaleDateString(); 

    console.log("this.patientForm.value", this.patientForm.value);

    const imageFile = this.patientForm.value.patientImage;
    this.patientService.addPatient(this.patientForm.value,  imageFile).subscribe(
      (data: patientIface) => {
        console.log("data", data);
        this.router.navigate(["patient-table"])
      }
    )
  }

I didn't write method for upload image in Angular. I just Want to save data without uploading image. The errors I get

1. POST http://localhost:8080/patient/post 400 (Bad Request)

2. Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'image' is not present]

What should I do ?