How could i pass the respective FormGroup to form layout component (parent)?

Question

I have a form layout, the routing render is inside this one. Using Angular Reactive Forms, we must to define the [formGroup] directive on the form. I have a Logup and a Login (diferents form structures), i build the form in each component, but i don't know how to pass it to the parent.

Here is the form layout component structure:

<form class="form-layout">
  <router-outlet></router-outlet>
</form>

Here is the logup component:

<div class="form-header">
  <h4>Logup</h4>
  <p>Complete to create your user</p>
</div>
<input type="text" class="form-control" placeholder="Name">
<input type="text" class="form-control" placeholder="Username">
<input type="email" class="form-control" placeholder="Email">
<div class="password-input">
  <input [type]="showpwd ? 'text' : 'password'" class="form-control" placeholder="Password">
  <i class="fas fa-eye" *ngIf="!showpwd" (click)="showpwd = true"></i>
  <i class="fas fa-eye-slash" *ngIf="showpwd" (click)="showpwd = false"></i>
</div>
<button class="btn btn-primary">Submit</button>
<a routerLink="/login">
  Already registered?
</a>

Here is the login component:

<div class="form-header">
  <h4>Login</h4>
  <p>Fill the form with your credentials</p>
</div>
<input type="text" class="form-control" placeholder="Username">
<div class="password-input">
  <input [type]="showpwd ? 'text' : 'password'" class="form-control" placeholder="Password">
  <i class="fas fa-eye" *ngIf="!showpwd" (click)="showpwd = true"></i>
  <i class="fas fa-eye-slash" *ngIf="showpwd" (click)="showpwd = false"></i>
</div>
<button class="btn btn-primary">Submit</button>
<a routerLink="/logup">
  Not registered yet?
</a>

Finally the app routing:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { FormLayoutComponent } from './form-layout/form-layout.component';

const routes: Routes = [
  { path: '', component: FormLayoutComponent,
    children: [
      {
        path: 'logup',
        loadChildren: () => import('./pages/logup/logup.module').then(m => m.LogupModule),
        data: { animationType: 'logupAnimation' }
      },
      {
        path: 'login',
        loadChildren: () => import('./pages/login/login.module').then(m => m.LoginModule),
        data: { animationType: 'loginAnimation' }
      },
      { path: '', redirectTo: 'logup', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]})
export class AppRoutingModule {};

Answer 1

Instead of giving formGroup from child to the parent, you can declare formGroup in layoutComponent and then use DI to pass it to each child.

LayoutComponent

@Component({
   providers: [{
    provide: 'FORM_GROUP_TOKEN',
    useFactory: (layoutComponent) => layoutComponent.formGroup,
    deps: [forwardRef(() => LayoutComponent )],
   }]
   ...
})
export LayoutComponent {
   formGroup = new FormGroup(...)
   ...
}

and then every child component can @Inject('FORM_GROUP_TOKEN') ( NodeInjector ) and get the formGroup