formbuilder inside a tabs component not working in angular 6

Question

i am trying to build a form which is divided across mutiple tabs in a single component. but formbuilder is throwing error saying that its not able to find the formControlName.

this is the stackblitz link formBuilderInsideTabs and the error screenshot of the same. enter image description here

Thanks in advance

Answer 1

Try:

<my-tabs>
  <my-tab [tabTitle]="'Tab 1'">
    <form [formGroup]="MyGroup">
      <div formGroupName="averageMos">
        <input type="text" formControlName="critical">
      </div>
    </form>
  </my-tab>
  <my-tab tabTitle="Tab 2">
    Tab 2 content
  </my-tab>

</my-tabs>

Please note that I have used formGroupName and not FormGroupName in html.

Here is the working demo