我忘了在输入标签中添加matInput属性

<mat-form-field appearance="outline">
    <mat-label>Mobile</mat-label>
    <input type="text"
           [(ngModel)]="parent.mobile"
           formControlName="mobile"
           id="mobile"
           name="mobile">
  </mat-form-field>

添加后:

<mat-label>Mobile</mat-label>
<input type="text"
       matInput
       [(ngModel)]="parent.mobile"
       formControlName="mobile"
       id="mobile"
       name="mobile">   </mat-form-field>

问题1:MatInputModule未导入

在模块中导入MatInputModule和MatFormFieldModule，即app.module.ts

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

问题2:matInput -拼写错误/忘记添加

一定要添加matInput，它是区分大小写的。

<mat-form-field>
    <input matInput type="text" />
</mat-form-field>

问题3:无效的*ngIf放置

检查input标签上是否有任何条件在任何情况下都会为假，因为mat-form-field会在其中查找matInput。相反，把*ngIf放在mat-form-field标签上。

<mat-form-field>
   <input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>

感谢@William Herrmann指出了这个问题#3

问题4:编译器仍然给出错误

如果angular编译器在修复上述问题后仍然报错，那么你必须尝试重新启动应用程序。

ng serve

部分解决方案是将材料表单字段包装在自定义组件中，并在其上实现ControlValueAccessor接口。除了内容投影之外，效果几乎是一样的。

参见Stackblitz的完整示例。

我在CustomInputComponent中使用了FormControl(响应式表单)，但如果你需要更复杂的表单元素，FormGroup或FormArray也应该工作。

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="outline" floatLabel="always" color="primary">
    <mat-label>First name</mat-label>
    <input matInput placeholder="First name" formControlName="firstName" required>
    <mat-hint>Fill in first name.</mat-hint>
    <mat-error *ngIf="firstNameControl.invalid && (firstNameControl.dirty || firstNameControl.touched)">
      <span *ngIf="firstNameControl.hasError('required')">
        You must fill in the first name.
      </span>
    </mat-error>
  </mat-form-field>

  <custom-input
    formControlName="lastName"
    [errorMessages]="errorMessagesForCustomInput"
    [hint]="'Fill in last name.'"
    [label]="'Last name'"
    [isRequired]="true"
    [placeholder]="'Last name'"
    [validators]="validatorsForCustomInput">
  </custom-input>

  <button mat-flat-button
    color="primary"
    type="submit"
    [disabled]="form.invalid || form.pending">
    Submit
  </button>

</form>

custom-input.component.html

<mat-form-field appearance="outline" floatLabel="always" color="primary">
  <mat-label>{{ label }}</mat-label>

  <input
    matInput
    [placeholder]="placeholder"
    [required]="isRequired"
    [formControl]="customControl"
    (blur)="onTouched()"
    (input)="onChange($event.target.value)">
  <mat-hint>{{ hint }}</mat-hint>

  <mat-error *ngIf="customControl.invalid && (customControl.dirty || customControl.touched)">
    <ng-container *ngFor="let error of errorMessages">
    <span *ngFor="let item of error | keyvalue">
      <span *ngIf="customControl.hasError(item.key)">
        {{ item.value }}
      </span>
    </span>
    </ng-container>
  </mat-error>
</mat-form-field>

在你的模块中导入MatInputModule。Ts文件，它将解决问题。

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

后面的表述是原来的答案。

不幸的是，目前还不支持将内容投影到mat-form-field。 请跟踪以下github问题，以获得有关它的最新消息。

到目前为止，唯一的解决方案是将您的内容直接放入mat-form-field组件或实现MatFormFieldControl类，从而创建一个自定义的表单字段组件。

如果你在mat-form-field中有一个正确的输入，但它有一个ngIf，这也会发生。例如:

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

在我的例子中，mat-chip-list应该只在其数据加载后才“出现”。但是，在执行验证时，mat-form-field会抱怨

mat-form-field必须包含MatFormFieldControl

为了修复它，控件必须在那里，所以我使用[hidden]:

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Mosta为mat-form-field提出了一个替代方案:move *ngIf:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

这里引用官方文件:

错误:mat-form-field必须包含MatFormFieldControl 当您没有将表单字段控件添加到表单字段时，将发生此错误。如果你的表单字段包含一个原生的<input>或<textarea>元素，确保你已经添加了matInput指令，并导入了MatInputModule。其他可以充当表单字段控件的组件包括<mat-select>、<mat-chip-list>以及您已创建的任何自定义表单字段控件。

在这里了解更多关于创建“自定义表单字段控件”的信息