У меня есть приложение angular 5.0.2. Я пытаюсь поместить форму в мой MatDialog компонент. Диалог работает, но когда я ставлю из полей там, он ломается и выдает ошибку.
компилятор. js: 466 Uncaught Ошибка: ошибки синтаксического анализа шаблона: «mat-label» не является известным элементом: 1. Если «mat-label» является компонентом Angular, то убедитесь, что он является частью этого модуля.
Вот компонент диалога ts
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'email-dialog',
templateUrl: './email-dialog.component.html',
styleUrls: ['./email-dialog.component.css']
})
export class EmailDialogComponent {
constructor(
public dialogRef: MatDialogRef<EmailDialogComponent>) { }
onNoClick(): void {
this.dialogRef.close();
}
}
html
<div mat-dialog-content>
<mat-form-field>
<mat-label>Title</mat-label>
<mat-input placeholder="Title"></mat-input>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button class="cfm-btn btn-n" mat-button (click)="onNoClick()">Cancel</button>
<button class="cfm-btn btn-y" mat-button [mat-dialog-close]="true">Send</button>
</div>
Вот мое приложение. модуль. Я импортировал MatFormFieldModule и поместил их под imports и exports Я не вижу, что мне не хватает.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Http, HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { GlobalService } from './shared/global.service';
import { SharedModule } from './shared/shared.module';
import { LP_HTTP_PROVIDERS } from './shared/http.interceptor';
import { GenericService } from 'app/shared/generic.service';
import { RequestSelectComponent } from 'app/request/request-select.component';
import {MatTableModule} from '@angular/material/table';
import { MatProgressSpinnerModule, MatSliderModule, MatButtonToggleModule, MatChipsModule, MatFormFieldModule, MatButtonModule, MatSelectModule, MatCheckboxModule, MatInputModule, MatRadioModule, MatAutocompleteModule, MatTooltipModule, MatTabsModule, MatGridListModule, MatSnackBarModule, MatProgressBarModule, MatDialogModule, MatCardModule, MatExpansionModule, MatIconModule, MatDatepickerModule, MatNativeDateModule, MatPaginatorModule, MatSortModule } from '@angular/material';
import { DynamicFormComponent } from 'app/questionnaire/dynamic-form.component';
import { DynamicFormGroupComponent } from 'app/questionnaire/dynamic-form-group.component';
import { DynamicFormQuestionComponent } from 'app/questionnaire/dynamic-form-question.component';
import { LoadingComponent } from 'app/loading/loading.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { VaultComponent } from 'app/components/vault.component';
import { CookieService } from 'ngx-cookie-service';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProjectOrderCodeComponent } from 'app/questionnaire/project-order-code.component';
import { ProjectOrderCodeKitsComponent } from 'app/questionnaire/project-order-code-kits.component';
import { OwlDateTimeModule } from 'ng-pick-datetime';
import { DateTimePickComponent } from 'app/questionnaire/datetime-picker.component';
import { DraftSearchComponent } from 'app/modals/draft-search.component';
import { ZupSearchComponent } from 'app/questionnaire/zup-search.component';
import { ProjectConversionComponent } from 'app/project-conversion/project-conversion.component';
import { ProjectConversionRowComponent } from 'app/project-conversion/project-conversion-row.component';
import { ProjectConversionRowFilterComponent } from 'app/project-conversion/project-conversion-row-filter.component';
import { ProjectConversionRowFiltersComponent } from 'app/project-conversion/project-conversion-row-filters.component';
import { WorkfrontParameterComponent } from 'app/project-conversion/workfront-parameter.component';
import { RadioControlComponent } from 'app/workfront-controls/radio-control.component';
import { MultiSelectControlComponent } from 'app/workfront-controls/multi-select-control.component';
import { SelectControlComponent } from 'app/workfront-controls/select-control.component';
import { TextControlComponent } from 'app/workfront-controls/text-control.component';
import { DateControlComponent } from 'app/workfront-controls/date-control.component';
import { CheckboxControlComponent } from 'app/workfront-controls/checkbox-control.component';
import { SelfServicingComponent } from 'app/self-servicing/self-servicing.component';
import { OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
import { ZupAdvancedSearchComponent } from 'app/zup-advanced-search/zup-advanced-search.component';
import { ZupAdvancedSearchResultsComponent } from 'app/zup-advanced-search/zup-advanced-search-results.component';
import { CopyRequestComponent } from './modals/copy-request.component';
import { CsatEmailComponent } from 'app/csat/csat-email.component';
import {ConfirmationDialogComponent} from 'app/components/confimation-dialog/confirmation-dialog.component';
import {EmailDialogComponent} from 'app/components/email-component/email-dialog.component';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
RouterModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatSelectModule,
MatCheckboxModule,
MatInputModule,
MatRadioModule,
MatAutocompleteModule,
MatTooltipModule,
MatTabsModule,
MatSnackBarModule,
MatGridListModule,
MatProgressBarModule,
MatCardModule,
MatExpansionModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule,
MatTableModule,
MatPaginatorModule,
FlexLayoutModule,
OwlDateTimeModule,
OwlNativeDateTimeModule,
MatDialogModule,
MatSortModule,
MatFormFieldModule,
MatChipsModule,
MatButtonToggleModule,
MatSliderModule,
MatProgressSpinnerModule
],
providers: [
GlobalService,
GenericService,
LP_HTTP_PROVIDERS,
CookieService,
{provide: OWL_DATE_TIME_LOCALE, useValue: 'en-US'}
],
entryComponents: [ConfirmationDialogComponent, EmailDialogComponent],
exports: [ SharedModule, MatTableModule, MatFormFieldModule ],
declarations: [ AppComponent, RequestSelectComponent, DynamicFormComponent, DynamicFormGroupComponent, DynamicFormQuestionComponent, LoadingComponent, VaultComponent, ProjectOrderCodeComponent, DateTimePickComponent, DraftSearchComponent, ZupSearchComponent, ProjectConversionComponent, ProjectConversionRowComponent, ProjectConversionRowFiltersComponent, ProjectConversionRowFilterComponent, WorkfrontParameterComponent, RadioControlComponent, MultiSelectControlComponent, SelectControlComponent, TextControlComponent, DateControlComponent, CheckboxControlComponent, SelfServicingComponent, ZupAdvancedSearchComponent, ZupAdvancedSearchResultsComponent, ProjectOrderCodeKitsComponent, CopyRequestComponent, CsatEmailComponent,
ConfirmationDialogComponent, EmailDialogComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }