我们正试图在我们公司建立我们自己的形式场组件。我们试图这样包装材料设计的组件:

字段:

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

文本框:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

用法:

<textbox value="test" hint="my hint"></textbox>

结果大致如下:

<textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
  <field>
    <mat-form-field class="mat-input-container mat-form-field">
      <div class="mat-input-wrapper mat-form-field-wrapper">
        <div class="mat-input-flex mat-form-field-flex">
          <div class="mat-input-infix mat-form-field-infix">
            <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
            <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
          </div>
        </div>
        <div class="mat-input-underline mat-form-field-underline">
          <span class="mat-input-ripple mat-form-field-ripple"></span>
        </div>
        <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
      </div>
    </mat-form-field>
  </field>
</textbox>

但是我在控制台得到“mat-form-field必须包含MatFormFieldControl”。我猜这与mat-form-field不直接包含matinput字段有关。但它包含了它,只是在ng-content投影中。

以下是闪电战: https://stackblitz.com/edit/angular-xpvwzf


当前回答

在你的模块中导入MatInputModule。Ts文件,它将解决问题。

import { MatInputModule } from '@angular/material/input';

后面的表述是原来的答案。

不幸的是,目前还不支持将内容投影到mat-form-field。 请跟踪以下github问题,以获得有关它的最新消息。

到目前为止,唯一的解决方案是将您的内容直接放入mat-form-field组件或实现MatFormFieldControl类,从而创建一个自定义的表单字段组件。

其他回答

问题1:MatInputModule未导入

在模块中导入MatInputModule和MatFormFieldModule,即app.module.ts

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

问题2:matInput -拼写错误/忘记添加

一定要添加matInput,它是区分大小写的。

<mat-form-field>
    <input matInput type="text" />
</mat-form-field>

问题3:无效的*ngIf放置

检查input标签上是否有任何条件在任何情况下都会为假,因为mat-form-field会在其中查找matInput。相反,把*ngIf放在mat-form-field标签上。

<mat-form-field>
   <input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>

感谢@William Herrmann指出了这个问题#3

问题4:编译器仍然给出错误

如果angular编译器在修复上述问题后仍然报错,那么你必须尝试重新启动应用程序。

ng serve

对我来说,错误是由于在<mat-form-field></mat-form-field>中缺少<input>和formControl属性

<form [formGroup]="FormName">
    <mat-form-field>
    <mat-label>Name</mat-label>
    </mat-form-field>
</form>

哪个是错误的… 正确的如下所示

<form [formGroup]="FormName">
    <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name">
    </mat-form-field>
</form>

我不小心从输入字段中删除了matInput指令,这导致了同样的错误。

eg.

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

固定的代码

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

你可以尝试按照这个指南来实现/提供你自己的MatFormFieldControl

不幸的是,我不能只是评论一些已经很好的答案,因为我还没有SO点,然而,有3个关键模块,你需要确保你导入到你的组件的父模块,除了你必须直接导入到你的组件。我想简单地和大家分享一下,并强调一下他们的工作。

MatInputModule MatFormFieldModule ReactiveFormsModule

前两个是针对Angular Material的。很多刚接触Angular Material的人会本能地遇到其中一个,但没有意识到构建表单需要两者兼而有之。

那么它们之间有什么区别呢?

MatFormFieldModule包含了Angular Material中所有可用的不同类型的表单字段。这是一个更高级的模块一般的表单字段,而MatInputModule是专门为“输入”字段类型,而不是选择框,单选按钮等。

上面列表中的第三项是Angular的响应式表单模块。响应式表单模块负责大量Angular的底层工作。如果你打算使用Angular,我强烈建议你花点时间阅读Angular Docs。他们有你所有的答案。构建应用程序很少不涉及表单,而且通常情况下,应用程序将涉及响应式表单。因此,请花点时间阅读这两页。

Angular Docs:响应式表单

Angular Docs:响应式表单模块

第一个文档“响应式表单”将是你入门时最有力的武器,第二个文档将是你进入更高级的Angular响应式表单应用时最有力的武器。

请记住,这些需要直接导入到组件的模块中,而不是导入到正在使用它们的组件中。如果我没记错的话,在Angular 2中,我们在主app模块中导入了整个Angular Material模块集,然后直接在每个组件中导入了我们需要的内容。目前的方法在我看来要高效得多,因为如果我们只使用其中的几个模块,我们就可以保证导入整个Angular Material模块集。

我希望这篇文章能让你对Angular Material的构建形式有更多的了解。