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：

<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

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

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

主入口点：

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';

Forked Stackblitz

为什么这么重要？

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

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

2 个答案:

主入口点：

次要入口点：

为什么这么重要？