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