How to send data to a specific 'folder structure' from Angular form to Firebase?

Question

On firebase, I have a collection called 'grogs' and inside it I have data elements that sit in the root of a document and data that sit in a folder structure under the root (same document collection, not sub-collections). For example:

Grogs (collection)
 characterID: string
 covenantID: string
 playerName: string

 Info (folder)
   charName: string
   charAge: number
   bornYear: number
   currentYear: number

(etc)

Previously I was using a parent form in Angular, but it ended up that I had to create a HUGE structure in the parent which was a pain to make changes to. What I would like to do is to submit data from my component that deals only with the data in the Info 'folder'.

I can populate the form on load, but if I submit, it pushes the data into the root of the document and not under Info. Where do I add to push the data from my Angular form under Info instead of the root without having to use parentformgroup?

buildForm() {
this.infoForm = this.formbuilder.group({
  charName: [''],
  type: [''],
  covenant: [''],
  gender: [''],
  size: [''],
  bornYear: [''],
  currentYear: [''],
  charAge: [''],
  height: [''],
  weight: [''],
  hair: [''],
  eyes: [''],
  charPic: [''],
  charPicDataUrl: ['']
});

this.infoData = this.characterDataService.GetCharacterInfo().pipe(
  tap(infoData => this.infoForm.patchValue(infoData))
);


updateCharacter() {
  const data = Object.assign({}, this.infoForm.value);
  this.firestore.doc(this.collection + '/' + this.charid).set(data, {merge: true});
} 

I would appreciate help.

Answer 1

I managed to solve it....was really simple. I just needed to change data to {info: data}:

this.firestore.doc(this.collection + '/' + this.charid).set({info: data}, {merge: true});