Select: Properly initialise selected options for select with multiple attribute

Author: mpellerin42

projects/demo/src/app/demo/pages/select-page/select-page.component.html

@@ -102,9 +102,9 @@ <h3>Dynamic options</h3>
             multiple
             placeholder="Select one or more options"
             [options]="multipleOptions"
-            (valueChange)="multipleSelection = $event"
+            [formControl]="multipleSelectControl"
             label="Multiple selection"></pa-select>
-          <div style="flex: 1">Value: {{ multipleSelection }}</div>
+          <div style="flex: 1">Value: {{ multipleSelectControl.getRawValue() }}</div>
         </div>
       </div>
     </div>

projects/demo/src/app/demo/pages/select-page/select-page.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { OptionHeaderModel, OptionModel, OptionSeparator } from '@guillotinaweb/pastanaga-angular';
 
 @Component({
@@ -10,6 +11,8 @@ export class SelectPageComponent {
   model = '';
   selectedTab = 'standalone';
 
+  multipleSelectControl = new FormControl<string>('user1,audio3');
+
   optionsWithDescription: (OptionModel | OptionSeparator | OptionHeaderModel)[] = [
     new OptionModel({ id: 'desc1', label: 'Option 1', help: 'Description 1', value: 'desc1' }),
     new OptionModel({