title: No provider for ControlContainer (Angular 5)
body: <p>I am using the MatDialog modal to contain a form, which I am converting to reactive. I'm getting errors on all 3 pertinent parts of the form: the form element, mat-form-field, and input. The errors are 'No provider for ControlContainer' and 'Can't bind to formGroup since it isn't a known property of form' (on the form element), the controlContainer error on the mat-form-field element, and 'No provider for NgControl' on the input. </p>
  
  <p>I've imported both the ReactiveFormsModule and the FormsModule in my submodule:</p>
  
  <pre><code>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
  {
  }
  </code></pre>
  
  <p>Here is the app-module.ts:</p>
  
  <pre><code>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
  {
  }
  </code></pre>
  
  <p>Here's what the relevant HTML looks like.</p>
  
  <pre><code>&lt;form *ngIf="modalFormGroup" [formGroup]="modalFormGroup" class="modal-content d-flex align-items-center"
    (submit)="okay()"&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- Input --&gt;
  &lt;div *ngIf="data.options.input" [ngSwitch]="data.options.input.type"&gt;
  
    &lt;mat-form-field formGroupName="ModalInput" class="modal-input-material w-100"&gt;
  
      &lt;input matInput *ngSwitchDefault [type]="data.options.input.type" title="Modal Input"
             id="ModalInput" formControlName="ModalInput"
             [placeholder]="data.options.input.placeholder || ''" required&gt;
  
    &lt;/mat-form-field&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>All elements have corresponding closing elements, they just aren't showing up here for some reason. I've successfully implemented reactive forms this exact same way for other components in the same app.</p>