Angular FormGroup.value puts values in array

Question

I'm using the Angular Material Stepper to create a simple True / False test. At the end of the test, you hit a submit button that calls a service that gathers the users answers and stores them.

The structure of my app looks like this:

It's quite simple. Here is the typescript code for the questions-stepper that uses the answers service

  //Push results to service so other components can use it
  gatherResults(){
    this._answerService.setAnswers(
                          Object.values(this.firstFormGroup.value),
                          Object.values(this.secondFormGroup.value), 
                          Object.values(this.thirdFormGroup.value),
                          Object.values(this.fourthFormGroup.value),
                          Object.values(this.fifthFormGroup.value),
                          Object.values(this.sixthFormGroup.value),
                          Object.values(this.seventhFormGroup.value),
                          Object.values(this.eigthFormGroup.value),
                          Object.values(this.ninthFormGroup.value),
                          Object.values(this.tenthFormGroup.value),
                          Object.values(this.eleventhFormGroup.value),
                          Object.values(this.twelthFormGroup.value)
                          );
    let answers = this._answerService.retrieveAnswers();
    console.log(answers);
  }

And here is the full code for the answers service

export class AnswersService {

  answers = {};
  constructor() { }

  setAnswers(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12){
    this.answers = {
      answer1 : a1,
      answer2: a2,
      answer3: a3,
      answer4: a4,
      answer5: a5,
      answer6: a6,
      answer7: a7,
      answer8: a8,
      answer9: a9,
      answer10: a10,
      answer11: a11,
      answer12: a12
    }
  }

  retrieveAnswers(){
    return this.answers;
  }

}

All of this code works, however, I have one small problem. The format in which the answers object exists. When I log the answers object in the answers service, it returns an object that has arrays in it.

Can I change this so that it's more like an object like this

EDIT

I've tried removing the Object.Values when calling the setAnswers function in the answers service. This just gives me another object in the value. This is what you get when you remove it from the first two.

Answer 1

Object.values(object) transforms the object into an array, so if you want the first value only, then you can try this.

  //Push results to service so other components can use it
  gatherResults(){
    this._answerService.setAnswers(
                          Object.values(this.firstFormGroup.value)[0],
                          Object.values(this.secondFormGroup.value)[0], 
                          Object.values(this.thirdFormGroup.value)[0],
                          Object.values(this.fourthFormGroup.value)[0],
                          Object.values(this.fifthFormGroup.value)[0],
                          Object.values(this.sixthFormGroup.value)[0],
                          Object.values(this.seventhFormGroup.value)[0],
                          Object.values(this.eigthFormGroup.value)[0],
                          Object.values(this.ninthFormGroup.value)[0],
                          Object.values(this.tenthFormGroup.value)[0],
                          Object.values(this.eleventhFormGroup.value)[0],
                          Object.values(this.twelthFormGroup.value)[0]
                          );
    let answers = this._answerService.retrieveAnswers();
    console.log(answers);
  }

And if you want to name all the values by name, you can try this:

//Push results to service so other components can use it
gatherResults(){
this._answerService.setAnswers(
                              this.firstFormGroup.value.firstCtrl,
                              this.secondFormGroup.value.secondCtrl, 
                              ..
                              //And similarly for all forms
                              );
let answers = this._answerService.retrieveAnswers();
console.log(answers);