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.
I've imported both the ReactiveFormsModule and the FormsModule in my submodule:
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
{
}
Here is the 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
{
}
Here's what the relevant HTML looks like.
<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>
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.
