mat-form-field必须包含MatFormFieldControl

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

字段:

<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

当前回答

我导入了模块并设置了指令，在再次执行'ng add @angular/material'后，它开始工作了。也许用ng serve重启应用就足够了

2020-09-20 06:31:58

其他回答

9加1。9 +材料

我注意到有3个错误会导致同样的错误:

确保你已经在app.module或模块中导入了MatFormFieldModule和MatInputModule。导入组件的t(嵌套模块的情况下) 当你包装材料按钮或复选框在垫形式领域。请参阅可以用mat-form-field封装的材料组件列表当你没有在标签中包含matInput时。例如:<input matInput type="number" step="0.01" formControlName="price" />

2020-06-27 08:01:23

请注意当我们在提交按钮周围使用“mat-form-field”标签时，有时会出现错误:

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

所以请不要在提交按钮周围使用这个标签

2019-11-20 01:50:00

我收到了同样的错误消息，但在我的情况下，上述内容都不能解决问题。解决方案就在“标签”中。你需要添加'mat-label'和把你的输入'label'标签也。我的问题的解决方案是在下面的片段:

  <mat-label>
     Username
  </mat-label>
  <label>
    <input 
       matInput 
       type="text" 
       placeholder="Your username" 
       formControlName="username"/>
  </label>

2020-09-29 15:50:07

这意味着你没有导入MatInputModule

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

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

2021-08-03 17:56:48

我忘了在输入标签中添加matInput属性

<mat-form-field appearance="outline">
    <mat-label>Mobile</mat-label>
    <input type="text"
           [(ngModel)]="parent.mobile"
           formControlName="mobile"
           id="mobile"
           name="mobile">
  </mat-form-field>

添加后:

<mat-label>Mobile</mat-label>
<input type="text"
       matInput
       [(ngModel)]="parent.mobile"
       formControlName="mobile"
       id="mobile"
       name="mobile">   </mat-form-field>

2022-12-11 14:56:18

mat-form-field必须包含MatFormFieldControl

推荐文章

最新文章

标签