[英]Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control
I'd like to implement an Angular Material custom form field following this guide: https://material.angular.io/guide/creating-a-custom-form-field-control我想按照本指南实现一个 Angular Material 自定义表单字段: https : //material.angular.io/guide/creating-a-custom-form-field-control
But I keep having this error: ERROR Error: mat-form-field must contain a MatFormFieldControl.但我一直有这个错误:错误错误:mat-form-field must contains a MatFormFieldControl。
According to the documentation :根据文档:
This error occurs when you have not added a form field control to your form field.
当您尚未将表单域控件添加到表单域时,会发生此错误。 If your form field contains a native or element, make sure you've added the matInput directive to it and have imported MatInputModule.
如果您的表单字段包含本机或元素,请确保您已向其中添加了 matInput 指令并已导入 MatInputModule。 Other components that can act as a form field control include , , and any custom form field controls you've created.
其他可用作表单域控件的组件包括 、 和您创建的任何自定义表单域控件。
But adding a matInput directive to the tags does not change anything.但是向标签添加 matInput 指令不会改变任何内容。 It's like it's blind because the tags are embedded in this new component
<example-tel-input>
就像是瞎了眼,因为标签嵌入在这个新组件
<example-tel-input>
The mat-form-field: 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>
The component with the inputs:具有输入的组件:
<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">–</span>
<input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
<span class="example-tel-input-spacer">–</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 Stackblitz: https ://stackblitz.com/edit/angular-9fyeha
What am I missing?我错过了什么?
The documentation didn't mention the fact that you should import material classes from the same entry points , either该文档也没有提到您应该从相同的入口点导入材料类的事实,
app.module.ts 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示例电话输入示例.component.ts
import { MatFormFieldControl } from '@angular/material';
or或者
app.module.ts 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示例电话输入示例.component.ts
import { MatFormFieldControl } from '@angular/material/form-field';
Because in order to get nested form control Angular material uses @ContentChild(MatFormFieldControl)
decorator and MatFormFieldControl
class should come from the same package otherwise instanceof
will return false
因为为了获得嵌套的表单控件,Angular 材质使用
@ContentChild(MatFormFieldControl)
装饰器和MatFormFieldControl
类应该来自同一个包,否则instanceof
将返回false
I added hidden input in your form-field-custom-control-example.component
and it worked.我在你的
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.