Hi, I went thru similar questions here but did not found solution for me so I am triing to ask with my code. I am triing to create dialog with input fields using angular material mat-form-field. This is my app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { ProjectsOverviewComponent } from './overviews/projects-overview/projects-overview.component';
import { TicketsOverviewComponent } from './overviews/tickets-overview/tickets-overview.component';
import { UsersOverviewComponent } from './overviews/users-overview/users-overview.component';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { UserBaseInfoComponent } from './user-base-info/user-base-info.component';
import { TicketBaseInfoComponent } from './ticket-base-info/ticket-base-info.component';
import { ProjectBaseInfoComponent } from './project-base-info/project-base-info.component';
import { ProjectsTableComponent } from './tables/projects-table/projects-table.component';
import { UsersTableComponent } from './tables/users-table/users-table.component';
import { TicketsTableComponent } from './tables/tickets-table/tickets-table.component';
import { PermisionsTableComponent } from './tables/permisions-table/permisions-table.component';
import { ChangePasswordComponent } from './change-password/change-password.component';
import { AttributesTableComponent } from './tables/attributes-table/attributes-table.component';
import { AttributeValuesTableComponent } from './tables/attribute-values-table/attribute-values-table.component';
import { AttachmentsTableComponent } from './tables/attachments-table/attachments-table.component';
import { CommentsTableComponent } from './tables/comments-table/comments-table.component';
import { HistoryTableComponent } from './tables/history-table/history-table.component';
import { WorkflowTableComponent } from './tables/workflow-table/workflow-table.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatSidenavModule} from "@angular/material/sidenav";
import {MatToolbarModule} from "@angular/material/toolbar";
import {MatIconModule} from "@angular/material/icon";
import {MatListModule} from "@angular/material/list";
import {MatButtonModule} from '@angular/material/button';
import {MatGridListModule} from "@angular/material/grid-list";
import {MatTableModule} from "@angular/material/table";
import {HttpClientModule, HTTP_INTERCEPTORS} from "@angular/common/http";
import {MatPaginatorModule} from "@angular/material/paginator";
import {MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field";
import {MatTooltipModule} from "@angular/material/tooltip";
import {MatDialogModule} from "@angular/material/dialog";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MatInputModule} from "@angular/material/input";
import {MatSelectModule} from "@angular/material/select";
import {MatCardModule} from '@angular/material/card';
import { OAuthModule } from 'angular-oauth2-oidc';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
function initializeKeycloak(keycloak: KeycloakService) {
return () =>
keycloak.init({
config: {
realm: 'pato',
url: 'http://localhost:8180/auth',
clientId: 'angular-springboot'
},
initOptions: {
onl oad: 'login-required'
}
});
}
@NgModule({
declarations: [
AppComponent,
UserProfileComponent,
ProjectsOverviewComponent,
TicketsOverviewComponent,
UsersOverviewComponent,
MainMenuComponent,
UserBaseInfoComponent,
TicketBaseInfoComponent,
ProjectBaseInfoComponent,
ProjectsTableComponent,
UsersTableComponent,
TicketsTableComponent,
PermisionsTableComponent,
ChangePasswordComponent,
AttributesTableComponent,
AttributeValuesTableComponent,
AttachmentsTableComponent,
CommentsTableComponent,
HistoryTableComponent,
WorkflowTableComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSidenavModule,
MatToolbarModule,
MatIconModule,
MatListModule,
MatButtonModule,
MatGridListModule,
MatTableModule,
HttpClientModule,
MatPaginatorModule,
MatFormFieldModule,
MatTooltipModule,
MatDialogModule,
ReactiveFormsModule,
FormsModule,
MatInputModule,
MatSelectModule,
MatCardModule,
KeycloakAngularModule,
FormsModule, ReactiveFormsModule,
OAuthModule.forRoot({
resourceServer: {
allowedUrls: ['http://localhost:8080/api'],
sendAccessToken: true
}
})
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
multi: true,
deps: [KeycloakService]
},
{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}
],
bootstrap: [AppComponent]
})
export class AppModule { }
This is my dialog component html
<h1 mat-dialog-title>dialog title</h1>
<div mat-dialog-content>
<mat-form-field >
<mat-label>Name</mat-label>
<input matInput >
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onCancelClick()">Cancel</button>
<button mat-button cdkFocusInitial>Save</button>
</div>Here is ts to component
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TicketPostDto } from 'src/dtos';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
newTicket: TicketPostDto = new TicketPostDto;
constructor(@Inject(MAT_DIALOG_DATA) public ticket: TicketPostDto) {}
ngOnInit(): void {
}
}
And here is my package.json in case it would help
{
"name": "pato-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~14.1.0",
"@angular/cdk": "^14.1.0",
"@angular/common": "~14.1.0",
"@angular/compiler": "~14.1.0",
"@angular/core": "~14.1.0",
"@angular/forms": "~14.1.0",
"@angular/material": "^14.1.0",
"@angular/platform-browser": "~14.1.0",
"@angular/platform-browser-dynamic": "~14.1.0",
"@angular/router": "~14.1.0",
"angular-oauth2-oidc": "^13.0.1",
"bootstrap": "^5.2.0",
"flexsearch": "^0.7.21",
"keycloak-angular": "^12.0.0",
"rxjs": "~7.5.6",
"tslib": "^2.4.0",
"zone.js": "~0.11.7"
},
"devDependencies": {
"@angular-devkit/build-angular": "~14.1.0",
"@angular/cli": "~14.1.0",
"@angular/compiler-cli": "~14.1.0",
"@types/jasmine": "~4.0.3",
"@types/node": "^18.6.1",
"jasmine-core": "~4.3.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.7.4"
}
}
This is error that I am getting
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
create-ticket-dialog.component.ts(12, 34): Error occurs in the template of component CreateTicketDialogComponent.
CodePudding user response：
Simply add your DialogComponent in your declarations array in the app.module.ts after importing it correctly.
CodePudding user response：
If you call the dialog from *.component.ts and in the dialog used some other modules you must add all modules for dialog to *.module.ts (module file for component where you call the dialog)