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

Question

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

但我一直有这样的错误：错误：mat表单字段必须包含MatFormFieldControl。

根据文件：

如果没有将表单字段控件添加到表单字段，则会出现此错误。如果表单字段包含本机或元素，请确保已向其添加matInput指令，并已导入MatInputMoules。可以充当窗体字段控件的其他组件包括，以及您创建的任何自定义窗体字段控件。

但是向标记添加一个matInput指令并不会改变任何事情。这就像是瞎子一样，因为标签嵌入了这个新组件

mat表单字段：

<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

我在你的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>

Answer 2

留档也没有提到你应该从相同的入口点导入材料类

应用程序。单元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';

或

应用程序。单元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';

分岔闪电战

因为为了得到嵌套的表单控件Angular材质使用@ContentChilder（MatFormFieldControl）装饰器和MatFormFieldControl类应该来自同一个包，否则instanceof将返回false