时间戳

首页 > 解决方案 > ERROR 错误：mat-form-field 必须包含 MatFormFieldControl.- 对于拖放

angular - ERROR 错误：mat-form-field 必须包含 MatFormFieldControl.- 对于拖放

问题描述

我收到 ans 错误 - ERROR 错误：mat-form-field 必须包含 MatFormFieldControl。

这不是因为缺少导入/导入，但它似乎需要一个控件并且 cdkDrop 不被视为一个字段。

请任何关于如何在角材料中使用拖放的想法..或者我需要将所有组件切换到cdk吗？

<mat-form-field>
  <mat-label>{{ todo.somekey}}</mat-label>
  <div *ngIf="!todo.options">
    <input matInput  name="meeting" [(ngModel)]="todo.meeting[0]" placeholder="Last name, First name">
  </div>

<div *ngIf="todo.options">  
     <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
      <div class="example-box" name="meeting" [(ngModel)]="todo.meeting" *ngFor="let meeting of todo.meeting" cdkDrag>{{meeting}}</div>
    </div>                      
</div>              
</mat-form-field>

示例基于 - https://stackblitz.com/angular/dnnjqknrjgay?file=src%2Fapp%2Fcdk-drag-drop-horizo​​ntal -sorting-example.html

在此处输入图像描述

我的修复/解决方法：

我接受了使用可见性属性的建议，但必须将其添加到 mat-form 字段。实际的想法是只隐藏输入......但现在还可以

<mat-form-field [style.visibility]="this.that.length == 0 ? 'visible' : 'hidden'">
 <mat-label>{{ .... }}</mat-label>
 <div ><input matInput  ....>
</div>
</mat-form-field>

<div [style.visibility]="....length > 0 ? 'visible' : 'hidden'">
    <mat-label>{{ ... }}</mat-label>
    <div cdkDropList [cdkDropListData]="..options" cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event, q)">
    <div class="example-box" *ngFor="let ..." cdkDrag>{{option}}</div>
 </div>
</div>

标签： angularangular-material

解决方案

mat-FormFiled需要一个 MatFormFieldControl （一个 mat-input 或一个输入），因为你有一个*ngIf你收到这个错误

无论如何，我不明白[(ngModel)]="todo.meeting"div 中的内容？？？？

注意：如果您需要有 matInput，您可以[style.visibility]="condition?'hidden':null改用*ngIf="condition"

推荐阅读