Нет провайдера для ControlContainer (Angular 5)

Я использую модальное окно MatDialog, чтобы содержать форму, которую я преобразовываю в реактивную. Я получаю ошибки во всех трех соответствующих частях формы: элементе формы, поле формы формы и вводе. Ошибки: «Нет поставщика для ControlContainer» и «Невозможно связать с formGroup, поскольку это не известное свойство формы» (в элементе формы), ошибка controlContainer в элементе mat-form-field и «Нет провайдер для NgControl' на входе.

Я импортировал как 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>

Все элементы имеют соответствующие закрывающие элементы, просто по какой-то причине они здесь не отображаются. Точно так же я успешно реализовал реактивные формы для других компонентов в том же приложении.


person heatherblairs    schedule 16.04.2018    source источник
comment
Покажи свои модули   -  person Suren Srapyan    schedule 16.04.2018
comment
Возможный дубликат Нет провайдера для ControlContainer - Angular 5   -  person Igor    schedule 16.04.2018
comment
@Igor Я уже посмотрел на это, и ответ состоит в том, чтобы добавить [formGroup] к форме, которая у меня есть.   -  person heatherblairs    schedule 16.04.2018
comment
Можете ли вы предоставить нам минимальную рабочую копию вашего выпуска?   -  person yurzui    schedule 16.04.2018
comment
Возможно, ваш элемент диалога находится за пределами корневого каталога вашего приложения?   -  person JC Ford    schedule 16.04.2018