get null value when sending data from an angular form to database (angular + springboot)

Question

hello when i'm trying to submit a form the champ "theme" sending null value to my database as well as "formatter". I tried some solution that I find in stackoverflow such editing the formatter and theme types in formation.class (from Theme to Object) but it doesn't make any change. Angular: -this is formation.html file:

```<form class="myForm " (ngSubmit) = "onSubmit()" >
                <header >Créer  formation</header>
                    <div class="row clearfix">
                      <div class="col_half">
                        <label style="margin-left: 25px;">Nom</label>
                        <div class="form-group">
                          <i aria-hidden="true" class="fas fa fa-envelope"></i>
                          <input type="text" class ="myInput" id = "name"
                          [(ngModel)] = "formation.name" name = "name"
                          required #Name="ngModel"
                          [class.is-invalid]="Name.invalid && Name.touched">
                          <small class="text-danger" [class.d-none]="Name.valid || Name.untouched">Ce champ est nécessaire</small>
                        </div>
                      </div>

                      <div class="col_half">
                        <label style="margin-left: 25px;">Déscription</label>
                        <div class="input_field">
                          <i aria-hidden="true" class="fas fa fa-envelope"></i>
                          <input  type="text" class ="myInput" id = "description"
                    [(ngModel)] = "formation.description" name = "description"
                    required #Desc="ngModel"
                    [class.is-invalid]="Desc.invalid && Desc.touched">
                    <small class="text-danger" [class.d-none]="Desc.valid || Desc.untouched">Ce champ est nécessaire</small>
                        </div>
                      </div>
                    </div>
                    
                      <div class="col_half">
                        <mat-form-field >
                          <mat-label>Thèmes</mat-label>
                          <mat-select id="theme" class ="myInput"  [(ngModel)] = "formation.theme" name = "theme" multiple>
                            <mat-option *ngFor="let theme of themes" [value]="theme">{{theme.name}}</mat-option>
                          </mat-select>
                        </mat-form-field>

                      </div>




                    </div>
                    <div class="row clearfix">

                      <div class="col_half">
                        <mat-form-field >
                          <mat-label>Formatteur</mat-label>
                          <mat-select id="formatter" class ="myInput"  [(ngModel)] = "formation.formatter" name = "formatter" multiple>
                            <mat-option *ngFor="let formatter of formatters" [value]="formatter.id">{{formatter.userName}}</mat-option>
                          </mat-select>
                        </mat-form-field>
                      </div>
                    </div>

                    <input type="submit" class="butt" value="Enregistrer">
                  </form>```.

-this is formation.ts file:

import { FormatterService } from './../../_services/formatter.service';
import { Formatter } from './../../_classes/formatter';
import { ThemeService } from './../../_services/theme.service';
import { Theme } from './../../_classes/theme';
import { FormationService } from './../../_services/formation.service';
import { Router } from '@angular/router';import { Formation } from 
'./../../_classes/formation';
import { Component, OnInit, EventEmitter, Output } from '@angular/core';import { 
FormControl } from '@angular/forms';
@Component({
 selector: 'app-create-formation',
 templateUrl: './create-formation.component.html',
 styleUrls: ['./create-formation.component.scss']
})
export class CreateFormationComponent implements OnInit {

 formation: Formation = new Formation();
Themes = new FormControl();
themes:Theme[]
Formatters = new FormControl();
formatters:Formatter[];

constructor(private formationService: FormationService, private 
themeService:ThemeService,
private formatterService:FormatterService, private router: Router) { }



 ngOnInit(): void {
  this.getThemes();
  this.getFormatter();
}


saveFormation(){
  this.formationService.createFormation(this.formation).subscribe( data =>{
   console.log(data);
   this.goToFormationList();
 },
 error => console.log(error));
}

goToFormationList(){
 this.router.navigate(['admin/formation-list']);
 }

 onSubmit(){
   console.log(this.formation);
   this.saveFormation();
 }
  getThemes(){
   this.themeService.getThemesList().subscribe(data => {
     this.themes = data;
   });
 }
  getFormatter(){
   this.formatterService.getFormatterList().subscribe(data => {
     this.formatters = data;
   });
 }

 }```

this is angular formation class:

``` import { Formatter } from './formatter';
   import { Theme } from './theme';
    export class Formation {
    id:number;
    name:string;
    description:string;
    theme:Object;
     formatter:Object;
     lien:String;
      date_creation:Date;
      date_debut:Date;
     date_final:Date;

     }```.

for the back-end: this is my formation.java:

```@Entity
   public class Formation {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;
    private String name;
    private String description;
    @ManyToMany(
           fetch = FetchType.LAZY,
                     cascade = {
                             CascadeType.PERSIST,
                             CascadeType.MERGE
               }
       )
   @JoinTable(name = "formation_theme",
    joinColumns = {
           @JoinColumn(name = "FORMATION_ID")
    },
    inverseJoinColumns = {
            @JoinColumn(name = "THEME_ID")
            }
    )

    private Set<Theme> theme = new HashSet<>(); 

    @ManyToMany(
            fetch = FetchType.LAZY,
                      cascade = {
                              CascadeType.PERSIST,
                              CascadeType.MERGE
                }
        )
    @JoinTable(name = "formation_formatter",
    joinColumns = {
            @JoinColumn(name = "FORMATION_ID")
    },
    inverseJoinColumns = {
            @JoinColumn(name = "Formatter_ID")
            }
    )

    private Set<Formatter> formatter = new HashSet<>(); ;
    private String lien;


    private ZonedDateTime date_creation = ZonedDateTime.now();

    private Calendar date_debut;

    private Calendar date_final;

    //getters and setters
}
```

-this is my formationController :

```@PostMapping("/formations")
     
      public Formation createFormation(@RequestBody Formation formation  ) {
         
                  return formationDao.save(formation);
          }
       // get formation by id rest api
      @GetMapping("/formations/{id}")
    
      public ResponseEntity<Formation> getFormationById(@PathVariable Long id) {
        Formation formation = formationDao.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("formation n'est pas trouvé :" + id));
        return ResponseEntity.ok(formation);
    }
    
    
    

[this is how it look ][1]


  [1]: https://i.stack.imgur.com/MHGUR.png
PS: i didn't get any error when submitting the form.