ERROR Error: mat-form-field must contain a MatFormFieldControl.- For Drag and Drop

Question

I am getting ans error - ERROR Error: mat-form-field must contain a MatFormFieldControl.

This is not because of missing import/imports, but it seems it needs a control and cdkDrop is not considered as a field.

Please any ideas on how to use drag and drop inside angular materials..or do i need to switch all components to 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>

Example based on - https://stackblitz.com/angular/dnnjqknrjgay?file=src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.html

My Fix/ Workaround :

I took the suggestion to use visibility property, but had to add it to mat-form field. Actual idea is to only hide input...but its ok for now

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

Eliseo Eliseo · Accepted Answer · 2021-01-04T18:33:52

A mat-FormFiled need a MatFormFieldControl (a mat-input or an input),as you has a *ngIf you received this error

Anyway I don't understand the [(ngModel)]="todo.meeting" in a div????

NOTE: You can use [style.visibility]="condition?'hidden':null instead *ngIf="condition" if you need has a matInput

ERROR Error: mat-form-field must contain a MatFormFieldControl.- For Drag and Drop

1 Answers