We Can do this

1. Saving Multi-Select Values

To bind the selected programme objects correctly, update the mat-option as follows:

<mat-select class="form-control" placeholder="Funding Programmes" formControlName="Programme" multiple>
  <mat-option *ngFor="let programme of programmeList" [value]="programme">
    {{programme.Description}}
  </mat-option>
</mat-select>

This ensures the selected Programme objects are stored as an array in the form control.

2. Dropdown Behind Modal

To fix the issue of the dropdown appearing behind the modal, add this CSS:

::ng-deep .mat-select-panel {
  z-index: 1050 !important;
}

This ensures the dropdown is displayed above the modal.

Key Points:

• Bind each mat-option to individual programme objects to save them correctly.
• Use ::ng-deep to adjust the dropdown's z-index so it appears on top of the modal.

Hope this solves your Question