为什么我的“mat-form-field”代码不起作用？答案

【问题标题】：Why is my code for 'mat-form-field' not working?为什么我的“mat-form-field”代码不起作用？
【发布时间】：2019-08-07 06:48:12
【问题描述】：

我对 Angular 完全陌生，我正在练习使用材料和添加表单字段。我遵循了所有指南，下载了所有包，我的代码只是从指南中复制过来的，但它仍然没有显示在我的浏览器上。

我的控制台最初显示

“模块'AppModule'导入的意外指令'MatFormField'。请添加@NgModule注释。”

在谷歌搜索后，我被告知用“MatFormFieldModule”替换它，但在我这样做之后我得到了这个错误

"NullInjectorError: StaticInjectorError(AppModule)[CdkObserveContent -> ElementRef]: StaticInjectorError（平台：核心）[CdkObserveContent -> ElementRef]： NullInjectorError: ElementRef 没有提供者！"

我的代码：

app.component.html

    <p>works</p>
    <form class = "tp-form">
      <mat-form-field class = "tp-full-width">
         <input matInput placeholder = "Favorite Food" value = "Pasta">
      </mat-form-field>
      <mat-form-field class = "tp-full-width">
         <textarea matInput placeholder = "Enter your comment"></textarea>
      </mat-form-field>
      <mat-form-field class = "tp-full-width">
         <input matInput placeholder = "Email" [formControl] = 
    "emailFormControl">
         <mat-error *ngIf = "emailFormControl.hasError('email') 
            && !emailFormControl.hasError('required')">
            Please enter a valid email address
         </mat-error>
         <mat-error *ngIf = "emailFormControl.hasError('required')">
            Email is <strong>required</strong>
         </mat-error>
      </mat-form-field>
    </form>

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { CourseComponent } from './course/course.component';

    import {BrowserAnimationsModule} from '@angular/platform- 
    browser/animations';
    import {MatInputModule, MatFormField, MatFormFieldModule} from 
    '@angular/material'
    import {FormsModule, ReactiveFormsModule} from '@angular/forms';

    import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

    const modules =  [
      BrowserAnimationsModule,
          MatInputModule,
          FormsModule,
          ReactiveFormsModule,
          MatFormFieldModule

    ]

    @NgModule({
      declarations: [
        AppComponent,
        CourseComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
          ...modules
      ],
      exports:[
        ...modules
      ],
      providers: [],
      bootstrap: [AppComponent]
      ,
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }

app.component.ts

    import { Component } from '@angular/core';
    import { FormControl } from "@angular/forms";
    import { Validators } from '@angular/forms';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'materialApp';
       emailFormControl = new FormControl('', [
          Validators.required,
          Validators.email,
      ]);
    }

目前我的浏览器只显示“作品”。

【问题讨论】：

您没有替换导入，因为 MatFormField 仍包含在您的导入中。删除它。
它在顶部的导入中，但不在@NgModule 中。我从顶部的导入中删除了它，但它没有改变任何东西
您的代码运行良好，甚至不应该导入 MatFormFieldModule。请通过分叉此 stackblitz 重新创建问题：stackblitz.com/edit/angular-6wrd3c?file=app/…
我设法通过在项目目录中重新安装材料来解决问题

标签： html angular typescript

【解决方案1】：

emailFormControl 应使用ViewChild 注释定义，如下所示：

import { Component, ElementRef, ViewChild } from '@angular/core'

...

@ViewChild('emailFormControl') emailFormControl: ElementRef

简而言之，ViewChild 允许我们查询元素（来自文档：https://angular.io/api/core/ViewChild）

在本例中，我们使用emailFormControl 的查询目标来获取有效引用

【讨论】：