Angular Material：创建自定义表单字段控件时，mat-form-field 必须包含 MatFormFieldControl

Question

我想按照本指南实现 Angular Material 自定义表单字段： https: //material.angular.io/guide/creating-a-custom-form-field-control

但我一直遇到此错误：错误错误：mat-form-field 必须包含 MatFormFieldControl。

根据文档：

当您尚未将表单字段控件添加到表单字段时，会出现此错误。如果您的表单字段包含本机或元素，请确保已向其中添加 matInput 指令并导入 MatInputModule。其他可以充当表单字段控件的组件包括 、 和您创建的任何自定义表单字段控件。

但是向标签添加 matInput 指令不会改变任何内容。就像它是盲目的，因为标签嵌入在这个新组件中<example-tel-input>

垫子形式字段：

<mat-form-field>
  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matSuffix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>
</mat-form-field>

具有输入的组件：

<div [formGroup]="parts" class="example-tel-input-container">
  <input class="example-tel-input-element" formControlName="area" size="3" aria-label="Area code" (input)="_handleInput()">
  <span class="example-tel-input-spacer">&ndash;</span>
  <input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
  <span class="example-tel-input-spacer">&ndash;</span>
  <input class="example-tel-input-element" formControlName="subscriber" size="4" aria-label="Subscriber number" (input)="_handleInput()">
</div>

Stackblitz： https: //stackblitz.com/edit/angular-9fyeha

我缺少什么？

Answer 1

该文档没有提到您应该从相同的入口点导入材质类这一事实

主要入口点：

应用程序模块.ts

import {
  MatIconModule,
  MatFormFieldModule, // it's redundant here since MatInputModule already exports it
  MatInputModule,
  MatSelectModule
} from "@angular/material";

示例-电话-输入-example.component.ts

import { MatFormFieldControl } from '@angular/material';

或者

次要入口点：

应用程序模块.ts

import { MatSelectModule } from "@angular/material/select";
import { MatIconModule } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input";

示例-电话-输入-example.component.ts

import { MatFormFieldControl } from '@angular/material/form-field';

叉式堆栈闪电战

为什么它如此重要？

因为为了获得嵌套表单控制，Angular 材质使用@ContentChild(MatFormFieldControl)装饰器和MatFormFieldControl类应该来自同一个包，否则instanceof将返回false