title: Using reactive forms in Angular with services
body: <p>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</p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>and deck</p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>this is the deckService file</p>
  
  <pre><code>import { Deck } from './deck.model';
  import { Card } from '../card/card.model';
  
  
  export class DeckService {
  
    decks: Deck[] = [
  
      new Deck("Control Priest", "Priest", [
        new Card("Reno Jackson", 6, "../../assets/img/Reno_Jackson.png"),
        new Card("Abomination", 5, "../../assets/img/Abomination.png"),
        new Card("Blade Flurry", 4, "../../assets/img/Blade_Flurry.png"),
        new Card("Felfire Potion", 6, "../../assets/img/Felfire_Potion.png")
      ]),
      new Deck("Big Spell Mage", "Mage", [
        new Card("Reno Jackson", 6, "../../assets/img/Reno_Jackson.png"),
        new Card("Abomination", 5, "../../assets/img/Abomination.png"),
        new Card("Blade Flurry", 4, "../../assets/img/Blade_Flurry.png"),
        new Card("Felfire Potion", 6, "../../assets/img/Felfire_Potion.png")
      ])
    ];
  
    newDeck: Deck; // this is undefined when i try to log it
  
  
    constructor() {
  
    }
  
    getDecks() {
    return this.decks.slice();
  }
  
    addCard(card: Card){
      console.log(this.newDeck)       // why can't access to newDeck? i have to 
                                      //    bind this function? if i log 'this'  
                                      //   i get DeckService as expected
      this.newDeck.deckCards.push(card);
  
  }
  
  addNewDeck(deck: Deck){
    console.log(this.decks);
    this.decks.push(deck);
  };
  
  }
  
  </code></pre>
  
  <p>i have a reactive form in which i can add cards to a deck choosing the card with a selection,
  i want to use the newDeck to save the cards from the form and then push the newDeck in the decks array, but newDeck is undefined, is this a binding problem?
  this is the form .ts file where i use the deckservice</p>
  
  <pre><code>import { Deck } from './../deck/deck.model';
  import { DeckService } from "./../deck/deck.service";
  
  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,
      private deckService: DeckService
    ) {}
  
    ngOnInit() {
      this.cards = this.cardService.getCards();
      this.createDeckForm = new FormGroup({
        deckName: new FormControl("Meme Deck"),
        deckClass: new FormControl(),
        deckCards: new FormControl()
      });
    }
  
      onAddCard(){
        this.deckService.addCard(this.createDeckForm.value);     //this is wrong but the problem is that i can't access to newDeck
  
  
      }
  
    onSubmit() {
  
      this.deckService.addNewDeck(this.createDeckForm.value);
  
    }
  }
  
  </code></pre>