title: Angular Material multi Select
body: <p>I'm after a bit of advice with using Angular Material 7 multi selects. The documentation doesn't help that much with what I'm trying to do.</p>
  
  <p>Bit of a background on what I'm trying to do.  </p>
  
  <p>So we are creating a record object and as part of that we need to know what Programme Funded them. The ProgrammeList is an array of Programme objects with {ProgrammeKey, Name, Description}. Previously we have used single selects and it works great. The issue is that each report can be funded by multiple Programmes so we need to use the multi Select.</p>
  
  <p>Firstly, When it comes to the database. How will the multi select options be saved? The idea was that the multi-select would form its own array of selected objects and then pass them back to the back end to be saved in a Linking Table. </p>
  
  <p>I have included the code below for the relevant areas</p>
  
  <p><strong>record.dto.ts</strong></p>
  
  <pre><code>import {Programme} from "./programme.dto";
  
  export class Record {
      Programme: Programme[];
      CcfLead: string;
      NihrRef: string;
      AddRef: string;
      AwardTitle: string;
      ProjectTitle: string;
      StartDate: Date;
      EndDate: Date;
  }
  </code></pre>
  
  <p><strong>general.component.ts</strong>
  ...</p>
  
  <pre><code> programmes = new FormControl();
   programmeList: Programme[];
  
   createRecordFrm() {
          this.recordFrm = this.fb.group({
              Programme : [{}, Validators.required],
              NihrRef: ["", Validators.required],
              AddRef:[""],
              CCFLead: ["", Validators.required],
              AwardTitle: ["", Validators.required],
              ProjectTitle: ["", Validators.required],
              StartDate: Date,
              EndDate: [Date, Validators.required]
          });
      }
  
      updateRecordFrm(record: Record) {
          this.recordFrm.setValue({
              Programme: record.Programme,
              NihrRef: record.NihrRef,
              AddRef: record.AddRef,
              CCFLead: record.CcfLead,
              AwardTitle: record.AwardTitle,
              ProjectTitle: record.ProjectTitle,
              StartDate: record.StartDate,
              EndDate: record.EndDate
          });
      }
  
  open(content: any, modal?: Record) {
          this.msg = null;
          this.modalMsg = null;
  
          if (modal != null) {
              this.updateRecordFrm(modal);
              // update recordFrm
          }
  
          this.activeModal = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', backdrop: "static", keyboard: false });
      }
  </code></pre>
  
  <p><strong>general.component.html</strong></p>
  
  <pre><code>&lt;ng-template #recordWizard let-c="close" let-d="dismiss" width="50%"&gt;
      &lt;form novalidate (ngSubmit)="saveRecord(recordFrm.value)" [formGroup]="recordFrm"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title" id="modal-basic-title"&gt;New Record&lt;/h4&gt;
              &lt;button type="button" class="close" (click)="d('Cross Click')"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div *ngIf="modalMsg" role="alert" class="alert alert-info alert-dismissible"&gt;
                  &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;mat-icon&gt;report_problem&lt;/mat-icon&gt;
                  &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
                  {{modalMsg}}
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;mat-tab-group&gt;
                      &lt;mat-tab label="First"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;span&gt;NIHR Reference*&lt;/span&gt;
                              &lt;input type="text" class="form-control" readonly formControlName="NihrRef" /&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;span&gt;Additional Reference&lt;/span&gt;
                              &lt;input type="text" class="form-control" readonly formControlName="AddRef" /&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;span&gt;Funding Programme:*&lt;/span&gt;
                              &lt;mat-select class="form-control" placeholder="Funding Programmes" formControl="programme" multiple [compareWith]="compare"&gt;
                                  &lt;mat-option *ngFor="let programme of programmeList" [value]="programmeList"&gt;{{programme.Description}}&lt;/mat-option&gt;
                              &lt;/mat-select&gt;
                          &lt;/div&gt;
                      &lt;/mat-tab&gt;
                      &lt;mat-tab label="Second"&gt;
                          Content 2
                      &lt;/mat-tab&gt;
                      &lt;mat-tab label="Third"&gt;
                          Content 3
                      &lt;/mat-tab&gt;
                      &lt;mat-tab label="Fourth"&gt;
                          Content 4
                      &lt;/mat-tab&gt;
                      &lt;mat-tab label="Fifth"&gt;
                          Content 5
                      &lt;/mat-tab&gt;
                      &lt;mat-tab label="Sixth"&gt;
                          Content 6
                      &lt;/mat-tab&gt;
                  &lt;/mat-tab-group&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;div&gt;
                  &lt;button type="submit" (click)="c" [disabled]="newRecordFrm.invalid" class="btn btn-primary"&gt;Save&lt;/button&gt;
                  &lt;button type="button" class="btn btn-outline-dark" (click)="c('Save click')"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>And finally the error</strong>
  <a href="https://i.stack.imgur.com/CJb1R.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CJb1R.jpg" alt="console error"></a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The main issue I had was that the dto was incorrect and needed some more values. </p>
  
  <p>There is a new issue where the dropdown is not brought to the front of the view. and instead behind the active model. Is there any css i can apply to resolve this?
  <a href="https://i.stack.imgur.com/Gvqyo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gvqyo.jpg" alt="enter image description here"></a> </p>
  
  <p>Many thanks in advance for your help</p>
  
  <p>Lewis</p>