没有ControlContainer的提供者（Angular 5）

Question

我正在使用MatDialog模式来包含一个表单，我将其转换为反应式。我在表单的所有3个相关部分都遇到错误：表单元素，mat-form-field和input。错误是没有ControlContainer的提供者＆＃39;并且＆＃39;无法绑定到formGroup，因为它不是一个已知的形式属性＆＃39; （在表单元素上），mat-form-field元素上的controlContainer错误，以及＆＃39; No NgControl＆＃39;在输入上。

我已经在子模块中导入了ReactiveFormsModule和FormsModule：

import {CommonModule, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {TranslateModule} from '@ngx-translate/core';
import {AppVendorModule} from '../../app-vendor.module';
import {AlertMessageComponent} from './components/alert-message/alert-    message.component';
import {CollapseFieldsetComponent} from './components/collapse-fieldset/collapse-fieldset.component';
import {CollapseTitleComponent} from './components/collapse-title/collapse-title.component';
import {DateRangePickerComponent} from './components/date-range-picker/date-range-picker.component';
import {LoadingSpinnerComponent} from './components/loading-spinner/loading-spinner.component';
import {LogoComponent} from './components/logo/logo.component';
import {ModalComponent} from './components/modal/modal.component';
import {ShortcutHeaderComponent} from './components/shortcut/shortcut.component';
import {SingleSearchComponent} from './components/single-search/single-search.component';
import {NumberInputDirective} from './directives/number-input/number-input.directive';
import {PostalInputDirective} from './directives/postal-input/postal-input.directive';
import {DashCurrencyPipe} from './pipes/dash-currency/dash-currency.pipe';
import {PermissionPipe} from './pipes/permission/permission.pipe';
import {PhoneNumberPipe} from './pipes/phone-number/phone-number.pipe';
import {PlatformDatePipe} from './pipes/platform-date/platform-date.pipe';
import {UrlSanitizerPipe} from './pipes/url-sanitizer/url-sanitizer.pipe';
import {CardService} from './services/card/card.service';
import {HelperService} from './services/helper/helper.service';
import {LocationService} from './services/location/location.service';
import {ModalService} from './services/modal/modal.service';
import {PdfService} from './services/pdf/pdf.service';
import {PermissionsService} from './services/permissions/permissions.service';
import {ScrollService} from './services/scroll/scroll.service';
import {CustomValidatorsService} from './services/validators/validators.service';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    TranslateModule,
    AppVendorModule,
    RouterModule,
    ReactiveFormsModule
  ],
  declarations: [
    LogoComponent,
    LoadingSpinnerComponent,
    AlertMessageComponent,
    ModalComponent,
    CollapseTitleComponent,
    CollapseFieldsetComponent,
    NumberInputDirective,
    PlatformDatePipe,
    PhoneNumberPipe,
    UrlSanitizerPipe,
    SingleSearchComponent,
    PostalInputDirective,
    DateRangePickerComponent,
    DashCurrencyPipe,
    ShortcutHeaderComponent,
    PermissionPipe
  ],
  exports: [
    LogoComponent,
    LoadingSpinnerComponent,
    AlertMessageComponent,
    ModalComponent,
    CollapseTitleComponent,
    CollapseFieldsetComponent,
    NumberInputDirective,
    PlatformDatePipe,
    PhoneNumberPipe,
    UrlSanitizerPipe,
    SingleSearchComponent,
    PostalInputDirective,
    DateRangePickerComponent,
    DashCurrencyPipe,
    ShortcutHeaderComponent,
    PermissionPipe
  ],
  providers: [
    ModalService,
    LocationService,
    CardService,
    DashCurrencyPipe,
    CurrencyPipe,
    DatePipe,
    DecimalPipe,
    PercentPipe,
    HelperService,
    PdfService,
    ScrollService,
    PermissionsService,
    CustomValidatorsService
  ],
  entryComponents: [
    ModalComponent
  ]
})
export class UtilityModule
{
}

这是app-module.ts：

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {TranslateService} from '@ngx-translate/core';
import {AppRoutingModule} from './app-routing.module';
import {AppSharedModule} from './app-shared.module';
import {AppVendorModule} from './app-vendor.module';
import {AppComponent} from './app.component';
import {AdminModule} from './modules/admin/admin.module';
import {AuthenticationModule} from './modules/authentication/authentication.module';
import {CustomerModule} from './modules/customer/customer.module';
import {CustomersModule} from './modules/customers/customers.module';
import {DashboardModule} from './modules/dashboard/dashboard.module';
import {InvoiceModule} from './modules/invoice/invoice.module';
import {InvoicesModule} from './modules/invoices/invoices.module';
import {MyAccountModule} from './modules/my-account/my-account.module';
import {PaymentModule} from './modules/payment/payment.module';
import {ReportModule} from './modules/report/report.module';
import {TransactionModule} from './modules/transaction/transaction.module';
import {TransactionsModule} from './modules/transactions/transactions.module';
import {ModalComponent} from './modules/utility/components/modal/modal.component';
import {UtilityModule} from './modules/utility/utility.module';
import {ApiV1Service} from './services/api-v1/api-v1.service';
import {ApiV2Service} from './services/api-v2/api-v2.service';
import {AppService} from './services/app/app.service';
import {LanguageService} from './services/language/language.service';
import {PendoService} from './services/pendo/pendo.service';
import {StorageService} from './services/storage/storage.service';
import {TimezoneService} from './services/timezone/timezone.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    AppSharedModule,
    AppVendorModule,
    AuthenticationModule,
    CustomerModule,
    CustomersModule,
    DashboardModule,
    InvoiceModule,
    InvoicesModule,
    PaymentModule,
    UtilityModule,
    ReportModule,
    TransactionModule,
    TransactionsModule,
    MyAccountModule,
    AdminModule
  ],
  providers: [
    ApiV1Service,
    ApiV2Service,
    AppService,
    LanguageService,
    PendoService,
    StorageService,
    TimezoneService,
    TranslateService
  ],
  bootstrap: [AppComponent],
  entryComponents: [ModalComponent]
})
export class AppModule
{
}

以下是相关HTML的内容。

<form *ngIf="modalFormGroup" [formGroup]="modalFormGroup" class="modal-content d-flex align-items-center"
  (submit)="okay()">

<!-- Input -->
<div *ngIf="data.options.input" [ngSwitch]="data.options.input.type">

  <mat-form-field formGroupName="ModalInput" class="modal-input-material w-100">

    <input matInput *ngSwitchDefault [type]="data.options.input.type" title="Modal Input"
           id="ModalInput" formControlName="ModalInput"
           [placeholder]="data.options.input.placeholder || ''" required>

  </mat-form-field>

</div>

所有元素都有相应的结束元素，由于某种原因它们不会出现在这里。我已经成功地为同一个应用程序中的其他组件实现了反应式表单。