'Create many forms in one component

I'm trying to create many forms in one component. I've tried to implement this with mat-tab-groups

<mat-tab-group>
  <mat-tab label="form1">
    <form>...</form>
  </mat-tab>
  <mat-tab label="form2">
    <form>...</form>
  </mat-tab>
</mat-tab-group>

I have these functions that create the forms in the ts:

createForm1(){
  this.form = this.formBuilder.group({
    field1: [''],
    field2: [''],
    ...
  })
}
createForm2(){
  this.form = this.formBuilder.group({
    field1: [''],
    field2: [''],
    ...
  })
}

I've called this functions in the constructor:

constructor(some dependencies){
  this.createForm1;
  this.createForm2;
}

However, when the createForm2() is called, it crashes. If I change the order, the form2 is created and form1 crashes. The error is ERROR Error: Cannot find control with name: someField.

I'm guessing the error is related to the tabs (only able to create the form of active tabs), but I don't know how to solve it.

Further Info

In the html, the controls are accessed via:

<div class="form-group"><input type="number" formControlName="field1" class="form-control"/></div>
<div class="form-group"><input type="number" formControlName="field2" class="form-control"/></div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source