如何传递相应的FormGroup以形成布局组件(父组件)？

Question

我有一个表单布局，路由渲染在这个布局中。使用Angular Reactive Forms，我们必须在表单上定义formGroup指令。我有一个Logup和一个Login (不同的表单结构)，我在每个组件中构建表单，但我不知道如何将其传递给父组件。

下面是表单布局组件结构：

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

下面是logup组件：

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

以下是登录组件：

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

最后是应用路由：

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

您可以在layoutComponent中声明formGroup，然后使用DI将其传递给每个子对象，而不是将formGroup从子对象传递给父对象。

LayoutComponent

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

然后每个子组件都可以@Inject('FORM_GROUP_TOKEN') (NodeInjector)并获得formGroup