mat-form-field 不是已知元素

问题描述 投票：0回答：1

我已将一个应用程序升级到 Angular 17（从 12）。但是，我收到许多与材质模块相关的运行时错误。我尝试了很多方法试图解决它，但无法弄清楚问题是什么。

错误： src/app/pages/table-maintenance/maintain-invalid-tax-id/modal/maintain-invalid-tax-id-modal.component.html:5:7 - 错误 NG8001：'mat-form -field' 不是已知元素：

  1. 如果“mat-form-field”是 Angular 组件，则验证它是否是该模块的一部分。
  2. 如果“mat-form-field”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

maintain-invalid-tax-id-modal.component.html：

<h2 mat-dialog-title>ADR Foreign Tax Reclaims: {{description}} TaxIds</h2>
<div mat-dialog-content>
  <form [formGroup]="invalidTaxIdsForm">
    <div fxLayout fxLayoutGap="20px">
      <mat-form-field>
        <mat-label class="bold">Invalid Tax ID</mat-label>
        <input matInput type="text"  placeholder="Invalid Tax ID" maxlength="10" cdkFocusInitial formControlName="invalidTaxId" />
        <mat-error *ngIf="invalidTaxIdsForm.controls.invalidTaxId.touched && invalidTaxIdsForm.controls.invalidTaxId?.errors">
          Tax id must be entered.
        </mat-error>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="20px">
      <mat-form-field>
        <mat-label class="bold">Comment</mat-label>
        <input matInput type="text" maxlength="255"  placeholder="Comment" formControlName="comment" />
      </mat-form-field>
    </div>

  <div>
      <mat-label class="bold mat-red">{{errorMsg}}</mat-label>
    </div> 
    
  <div fxLayout="row" fxLayoutGap="20px">
    <button fxFlex="25" mat-raised-button color="primary" *ngIf="isAdd (click)="addNew()">Submit</button>
     <button fxFlex="25" mat-raised-button color="primary" *ngIf="isEdit" (click)="updateInvalidTaxIds()">Submit</button>
    <button fxFlex="25" mat-raised-button color="secondary" (click)="close()">Cancel</button>
  </div>
  </form>
</div>

维护无效-tax-id-modal.component.ts：

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AppConstants } from '@app/shared/models/app-constants';
import { MaintainInvalidTaxIdsModel } from '../models/maintain-invalid-taxId.model';
import { MaintainInvalidTaxIdService } from '../services/maintain-invalid-tax-id.service';

@Component({
  selector: 'app-maintain-invalid-tax-id-modal',
  templateUrl: './maintain-invalid-tax-id-modal.component.html',
  styleUrls: ['./maintain-invalid-tax-id-modal.component.scss']
})
export class MaintainInvalidTaxIdModalComponent implements OnInit {
  invalidTaxIdsForm: UntypedFormGroup;
  description: string;
  action: string;
  errorMsg: string;
  isEdit: boolean = false;
  isAdd: boolean = false;


  constructor(private formBuilder: UntypedFormBuilder,
    public dialog: MatDialog,
    private service:MaintainInvalidTaxIdService ,
    public dialogRef: MatDialogRef<MaintainInvalidTaxIdModalComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: MaintainInvalidTaxIdsModel) { }

  ngOnInit(): void {
    this.actionInitializer();
    this.createForm();

    if (this.isEdit) {
      this.patchEditForm();
      this.invalidTaxIdsForm.controls['invalidTaxId'].disable();

    }
  }
//[Code removed for brevity]
}

app.module.ts：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { LogoutComponent } from './pages/logout/logout.component';
import { appInitializer } from './app.initializer';
import { environment } from '@environments/environment';


//Modules
import { AppRoutingModule } from './app-routing.module';
import { MaterialModule } from './material-module';
import { ControlsModule } from 'src/app/controls/controls.module';
import { SharedComponentsModule } from './shared/components/shared-components.module';
import { NgIdleModule } from '@ng-idle/core';
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input';

//Interceptors
import { JwtInterceptor } from 'src/app/shared/interceptors/jwt/jwt.interceptor';
import { LoadingSpinnerInterceptor } from './shared/interceptors/loading-spinner/loading-spinner.interceptor';
import { ServiceUnavailableInterceptor } from './shared/interceptors/status-code/service-unavailable.interceptor';
import { Status401Interceptor } from 'src/app/shared/interceptors/status-code/status-401.interceptor';
import { Status404Interceptor } from 'src/app/shared/interceptors/status-code/status-404.interceptor';
import { Status405Interceptor } from './shared/interceptors/status-code/status-405.interceptor';
import { Status500Interceptor } from 'src/app/shared/interceptors/status-code/status-500.interceptor';

//Layout
import { HeaderComponent } from 'src/app/shared/layout/header/header.component';
import { FooterComponent } from 'src/app/shared/layout/footer/footer.component';
import { NavMenuComponent } from 'src/app/shared/layout/nav-menu/nav-menu.component';

//Services
import { ConfigurationService } from './shared/services/configuration/configuration.service';
import { ENVIRONMENT } from './shared/services/configuration/environment-token';
import { AuthenticationService } from "@app/shared/services/authentication/authentication.service";
import { LoggingService } from '@app/shared/services/logging/logging.service';
import { LogPublisherService } from '@app/shared/services/logging/log-publisher.service';

export function initConfiguration(configService: ConfigurationService) {
  return () => configService.loadApiConfig();
}

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NavMenuComponent,
    LoginComponent,
    LogoutComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    ControlsModule,
    SharedComponentsModule,
    NgIdleModule.forRoot(),
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    { provide: ENVIRONMENT, useValue: environment },
    {
      provide: APP_INITIALIZER,
      useFactory: initConfiguration,
      multi: true,
      deps: [ConfigurationService]
    },
    LoadingSpinnerInterceptor,
    LoggingService,
    LogPublisherService,
    { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true, deps: [AuthenticationService] },
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoadingSpinnerInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status500Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status404Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status405Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status401Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ServiceUnavailableInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我做了什么： 按照上一篇文章的建议，将 MatFormFieldModule 和 MatInputModule 添加到 app.module.ts 中。 已验证 Material 已成功安装（@angular/[电子邮件受保护]）。

我感谢任何帮助。

angular angular-material
1个回答
0
投票

您的组件 

MaintainInvalidTaxIdModalComponent
似乎不是独立的，也没有在您的 
app.module.ts
中声明。这可能意味着它是在不同的模块中声明的。

您需要在声明您尝试使用它们的组件的同一模块中导入 

MatFormFieldModule
和 
MatInputModule
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.