角度材质:创建自定义表单字段控件时，mat-form-field必须包含 MatFormFieldControl

Question

我想按照本指南实现一个角度材料自定义表单字段： 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>

斯塔克闪电战：https://stackblitz.com/edit/angular-9fyeha

我错过了什么？

Answer 1

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

主要入口点：

app.module.ts

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

example-tel-input-example.component.ts

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

或

辅助入口点：

app.module.ts

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

example-tel-input-example.component.ts

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

分叉堆叠闪电战

为什么它如此重要？

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

Answer 2

我在您的form-field-custom-control-example.component中添加了隐藏的输入，它起作用了。

<mat-form-field>
<input matInput style="display:none">
<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>