'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 |
|---|
