Angular 10 延迟加载反应形式面临问题

Question

我正在尝试在 angular 10 中实现延迟加载

应用模块

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue : '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用路由

const routes: Routes = [ {path: 'contactus', loadChildren: () => import('./contactus/contactus.module').then(m => m.ContactusModule) },    ];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {

      scrollPositionRestoration: "enabled",

    }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

联系模块

@NgModule({
  declarations: [ContactusComponent],
  imports: [
    SharedModule,
    ContactusRoutingModule
  ]
})
export class ContactusModule { }

共享模块

@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent
  ],
  schemas:[],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [{provide: APP_BASE_HREF, useValue : '/' }],
  exports:[HeaderComponent, FooterComponent],
  bootstrap: [AppComponent]
})
export class SharedModule { }

联系 component.ts

name = new FormControl('dff');
  onSubmit() {
    console.log(this.name.value);  // { first: '', last: '' }
  }

联系人.html

Form value: {{ name.value }}

// 显示默认值 dff

当我更改字段中的值时，它现在正在更改它，当我提交时它显示 dff