Objects in Angular Reactive Form

Question

i'm tryng to make a kind of deckBuilder, i have some cards and decks made of cards, these are the card and deck models

export class Card {
  public name: string;
  public manaCost: number;
  public imagePath: string;

  constructor(name: string, manaCost: number, imagePath: string) {
    this.name = name;
    this.manaCost = manaCost;
    this.imagePath = imagePath;
  }
}

and deck

import { Card } from '../card/card.model';

export class Deck {
  public deckName: string;
  public deckClass: string;
  public deckCards: Card[];

  constructor(deckName: string, deckClass: string, deckCards: Card[]) {
    this.deckName = deckName;
    this.deckClass = deckClass;
    this.deckCards = deckCards;
  }
}

i have a reactive form where the user can choose the deck name, the deck class and the cards of the deck these are the .ts and .html files

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import {CardService} from '../card/card.service';
import { Card } from '../card/card.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-create-deck',
  templateUrl: './create-deck.component.html',
  styleUrls: ['./create-deck.component.scss']
})
export class CreateDeckComponent implements OnInit {
  cards: Card [];
  classes = ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
  createDeckForm: FormGroup;
  deckName: FormControl;

  constructor(private cardService: CardService) { }

  ngOnInit(){

    this.cards = this.cardService.getCards();
    //console.log(this.cards);

    this.createDeckForm = new FormGroup({
      'deckName': new FormControl('Meme Deck'),
      'chooseClass': new FormControl(),
      'chooseCard': new FormControl(),
    });
  }
  onSubmit() {
    console.log(this.createDeckForm.value);
    //this.createDeckForm.reset();
  }

}

and .html

<div class="container">
  <div class="row">
    <form [formGroup]="createDeckForm" (ngSubmit)="onSubmit()">

      <label >Deck Name</label>
      <input
        type="text"
        id="deckName"
        formControlName="deckName"
        class="form-control"
      />
      <p>

      </p>
      <hr>
      <label for="chooseClass">Deck class</label>
      <select id="chooseClass" formControlName="chooseClass">
        <option
            *ngFor="let class of classes"
            [value]="class">
            {{class}}
      </option>
      </select>
      <hr>
      <label for="chooseCard">Select a Card</label>
      <select formControlName = "chooseCard" id="chooseCard" name="chooseCard">
        <option
            *ngFor="let card of cards"
            [value]="card">
            {{card.name}}
      </option>
    </select>

      <hr>
      <button class="btn btn-primary" type="submit">Submit</button>

    </form>
  </div>
</div>

for now i have only a select in which you can choose a single card, but when i log in the console the card when i press the submit button the output(console.log(this.createDeckForm.value);) is something like this:

{deckName: "Meme Deck", chooseClass: "Rogue", chooseCard: "[object Object]"}
deckName: "Meme Deck"
chooseClass: "Rogue"
chooseCard: "[object Object]"

if i set the value in the html like this [value]="card.name" i correctly log the name of the card, but i need to receve the whole card object as a value to add the card in a deck later, what i'm doing wrong?