Question

目前我在尝试使用一些 mat 组件（例如“mat-form-field”或“mat-date-range”）后遇到错误-输入”等。我已经将它们导入到 app.module 文件中，就像我对这类组件所做的那样，但我遇到了很多这样的错误：

如果 'mat-form-field' 是一个 Angular 组件，那么验证它是这个模块的一部分如果 'mat-label' 是一个 Angular 组件，则验证它是该模块的一部分。

我不得不说，在同一个项目中，我使用了 mat-tab-group 和 mat-tab 等......我对它们没有任何错误。

这是我的代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularMaterialModule } from './angular-material.module/angular-material.module.module';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/';
import { MatIconModule } from '@angular/material/icon';
import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
  declarations: [], // I've omitted this part because is not relevant to this issue
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularMaterialModule,
    MatProgressSpinnerModule,
    MatButtonToggleModule,
    MatSlideToggleModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    ClipboardModule
  ],
  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

还有我的组件：create.report.component.html

<mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="reportForm" [rangePicker]="picker">
      <input matStartDate formControlName="from" placeholder="Start date">
      <input matEndDate formControlName="to" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  

  </mat-form-field>

create.report.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-report',
  templateUrl: './create.report.component.html'
})
export class CreateReportComponent implements OnInit {
  reportForm = new FormGroup({
    from: new FormControl(),
    to: new FormControl()
  });
  
  constructor(
    private router: Router,
    private fb: FormBuilder) {
      this.buildForm();

    }

  ngOnInit(): void {
  }



  buildForm() {
    // console.log('***buildForm this.hmService***', this.hmService);

    this.reportForm = this.fb.group( {
      from  : [ '', [Validators.required, Validators.minLength(5)]],
      to: [ '', [Validators.required, Validators.minLength(5)]],
      published  : [ '', [Validators.required, Validators.minLength(5)]]
   
    });
  }

}

Answer 1

好的，我终于解决了！通过这条线，我解决了材料组件的问题。现在我可以在我的 create.report.component 中使用它们。 import { CreateReportComponent } from './pages/report/create/create.report.component';

错误 NG8001：“mat-form-field”不是已知元素

1 个答案: