title: Angular 5 Select multiple returns selected object instead of array with selected object
body: <p>I have this very annoying problem. Let me add my html:</p>
  
  <pre><code>&lt;div class="page"&gt;
  &lt;h1&gt;Add user&lt;/h1&gt;
  &lt;form [formGroup]="inviteUserForm" (ngSubmit)="onSubmit()" novalidate&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group col-lg-6"&gt;
              &lt;label for="email"&gt;
                  Email
              &lt;/label&gt;
              &lt;input class="form-control" id="email" formControlName="email"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;        
          &lt;div class="form-group col-lg-6"&gt;
              &lt;label for="roles"&gt;
                  User role
              &lt;/label&gt;
              &lt;select class="form-control" id="roles" multiple formControlName="roles"&gt;
                  &lt;ng-container *ngFor="let role of roles"&gt;
                      &lt;option *ngIf="role !== 5" value="{{role}}"&gt;{{role | userRole}}&lt;/option&gt;
                  &lt;/ng-container&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;        
          &lt;div class="form-group col-lg-6"&gt;
              &lt;label for="account"&gt;
                  Account
              &lt;/label&gt;
              &lt;select class="form-control" id="accounts" multiple formControlName="accounts"&gt;
                  &lt;ng-container *ngFor="let account of accounts"&gt;
                      &lt;option [attr.selected]="activeAccount.id == account.id" 
                          value="account"&gt;{{account.name}}&lt;/option&gt;
                  &lt;/ng-container&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button class="btn btn-primary" type="submit"&gt;Invite user&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the controller code:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  import {Router} from "@angular/router";
  import {ErrorService} from '../../../../_services/error.service';
  import {UserService} from '../../../../_services/user.service';
  import {AccountService} from '../../../../_services/account.service';
  import {Account} from '../../../../_models/account';
  import {UserType} from '../../../../_enums/user-type.enum';
  
  @Component({
      selector: 'user',
      templateUrl: './user.component.html',
      styleUrls: ['./user.component.css']
  })
  
  export class UserComponent {
      inviteUserForm: FormGroup;
      userType: UserType;
      accounts: Account[];
      activeAccount: Account;
      roles: number[];
  
      constructor(private errorService:ErrorService,
                  private formBuilder: FormBuilder,
                  private userService: UserService,
                  private accountService: AccountService,
                  private router: Router) {}
  
      ngOnInit() {
          this.inviteUserForm = this.formBuilder.group({
              email: ["", [Validators.required, Validators.email]],
              accounts: [[], [Validators.required]],
              roles: [[], [Validators.required]]
          });
  
          this.accountService.getAccounts().subscribe(
              (accounts) =&gt; {
                  this.accounts = accounts;
                  this.activeAccount = this.accountService.getActiveAccount(this.accounts);
                  this.inviteUserForm.controls['accounts'].setValue(this.activeAccount);
              }
          );
  
          this.roles = this.getUserRoles();
      }
  
      onSubmit() {
          if (this.inviteUserForm.valid){
              this.userService.invite(this.inviteUserForm.value).subscribe(
                  () =&gt; this.router.navigate(['/settings/users']),
                  (error) =&gt; this.errorService.setError(error)
              );
          }
      }
  
      getUserRoles(): Array&lt;number&gt; {
          var keys = Object.keys(UserType);
          return keys.slice(0, keys.length / 2).map(item =&gt; parseInt(item));
      }
  }
  </code></pre>
  
  <p>My problem is that when I select the account and submit it, it is sent as an object instead of an array. See submitted json from this code here.</p>
  
  <pre><code>{
      "email":"test@test.com",
      "accounts":{
          "id":1,
          "name":"Test business",
          "addressLine1":"A road",
          "addressLine2":"Centrum",
          "postalCode":"12345Z",
          "postalCity":"London",
          "country":"Great Britain",
          "type":"business",
          "vatNumber":"123456123456"
      },
      "roles":["3"]
  }
  </code></pre>
  
  <p>At the moment I have only one account in the accounts array.
  Any suggestions on how to fix this? I am totally clueless as to why it returns the object from the <code>form.value</code> call instead of the array with the object in it.</p>