Angular 5 Select multiple returns selected object instead of array with selected object

Question

I have this very annoying problem. Let me add my html:

<div class="page">
<h1>Add user</h1>
<form [formGroup]="inviteUserForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="row">
        <div class="form-group col-lg-6">
            <label for="email">
                Email
            </label>
            <input class="form-control" id="email" formControlName="email">
        </div>
    </div>

    <div class="row">        
        <div class="form-group col-lg-6">
            <label for="roles">
                User role
            </label>
            <select class="form-control" id="roles" multiple formControlName="roles">
                <ng-container *ngFor="let role of roles">
                    <option *ngIf="role !== 5" value="{{role}}">{{role | userRole}}</option>
                </ng-container>
            </select>
        </div>
    </div>

    <div class="row">        
        <div class="form-group col-lg-6">
            <label for="account">
                Account
            </label>
            <select class="form-control" id="accounts" multiple formControlName="accounts">
                <ng-container *ngFor="let account of accounts">
                    <option [attr.selected]="activeAccount.id == account.id" 
                        value="account">{{account.name}}</option>
                </ng-container>
            </select>
        </div>
    </div>

    <button class="btn btn-primary" type="submit">Invite user</button>
</form>

And the controller 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) => {
                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(
                () => this.router.navigate(['/settings/users']),
                (error) => this.errorService.setError(error)
            );
        }
    }

    getUserRoles(): Array<number> {
        var keys = Object.keys(UserType);
        return keys.slice(0, keys.length / 2).map(item => parseInt(item));
    }
}

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.

{
    "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"]
}

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 form.value call instead of the array with the object in it.

Answer 1

I will add an answer to my own question. The problem is in the setValue call. I should have added an array with the selected object instead of just the selected object. I will leave this in here just for information if someone else does the same mistake.