logo标签列表

Angular 12 Material显示“无法读取属性errorstate undefined of MatFormField”错误

angular-materialangular12mat-form-field
9
这是我为单页Web应用程序编写的简单HTML代码。
<div class="bg">
    <h1 class="faq_heading">Frequently Asked Questions</h1>
    <div class="search">
        <mat-form-field class="search_input">
            <input type="text" placeholder="Search" class="search_input" matInput [(ngModel)]="inp" (keyup)="onKey($event)" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Categories</mat-label>
            <mat-select class="dropdown" placeholder="Categories">
                <mat-option value="Default">Default</mat-option>
            </mat-select>
        </mat-form-field>
        <img src="../assets/images/search.svg" alt="" class="search_img" />
    </div>
</div>

在component.ts文件中并没有太多内容，只有基本的模板和必要的导入语句。

以下是app.module.ts文件。

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MatFormFieldModule } from "@angular/material/form-field";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MatGridListModule } from "@angular/material/grid-list";
import { MatSelectModule } from "@angular/material/select";
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatDialogModule } from "@angular/material/dialog";
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { HttpClientModule } from "@angular/common/http";
import { faqservice } from "./faq.service";
import { MatExpansionModule } from "@angular/material/expansion";
import { FormsModule } from "@angular/forms";

@NgModule({
    declarations: [AppComponent],
    imports: [
        FormsModule,
        MatExpansionModule,
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        MatFormFieldModule,
        MatGridListModule,
        MatSelectModule,
        MatDialogModule,
        BrowserAnimationsModule,
        MatSnackBarModule,
        MatPaginatorModule,
    ],
    providers: [faqservice],
    bootstrap: [AppComponent],
})
export class AppModule {}

以下是错误信息 错误1：

ERROR TypeError: Cannot read property 'controlType' of undefined
    at MatFormField.ngAfterContentInit (form-field.js:527)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9486)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at renderComponentOrTemplate (core.js:9559)
    at tickRootContext (core.js:10790)

错误2：

ERROR TypeError: Cannot read property 'errorState' of undefined
    at MatFormField_HostBindings (form-field.js:830)
    at processHostBindingOpCodes (core.js:9213)
    at refreshView (core.js:9491)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at renderComponentOrTemplate (core.js:9559)
    at tickRootContext (core.js:10790)
    at detectChangesInRootView (core.js:10815)
    at RootViewRef.detectChanges (core.js:22865)

你可以看到代码中还没有很多内容，因为我刚开始开发，但是我已经在基本模板中直接从文档获取错误了。

如何处理这些错误？（请注意，我对Angular Material还很陌生，如果可能的话，请在答案中提及一些细节。）

这里是package.json文件

{
  "name": "faq1",
  "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": "~12.1.1",
    "@angular/cdk": "^12.1.1",
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/material": "^12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular/cli": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.3.2"
  }
}
你能添加你的 package.json 文件吗？ - MaartenDev
完成 - Himanshu Grover
你需要添加MatInputModule。import {MatInputModule} from '@angular/material/input'; - Mir entafaz Ali
3个回答
19

在模块文件中导入并声明MatInputModule即可解决该问题。

....
import {MatInputModule} from '@angular/material/input';


@NgModule({
    ...
    ,
    imports: [
        ...
        MatInputModule,
    ],
    providers: [
        ....
    ]
})
export class MyModule {}
0

我曾经遇到过同样的问题，但是当我改成这个之后，问题就解决了：

    <mat-form-field appearance="fill">
    <mat-label>Status</mat-label>
    <mat-select>
        <mat-option *ngFor="let status of ['active', 'inactive']" [value]="status">
            {{status}}
        </mat-option>
    </mat-select>
</mat-form-field>
0

我曾经也遇到过相同的问题，但通过在 mat-form-field 标签中添加 ngIf 来解决了这个问题。

<mat-form-field appearance="fill" *ngIf="role$ | async as roles">
<mat-label>Select a role</mat-label>
    <mat-select formControlName="codeRole">
        <mat-option *ngFor="let r of roles" [value]="r.code>
           {{r.description}}</mat-option>
    </mat-select>
</mat-form-field>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接