#angular #angular-material
#angular #angular-material
Вопрос:
Я получаю сообщение об ошибке — Ошибка ошибки: mat-form-field должно содержать MatFormFieldControl.
Это не из-за отсутствия импорта / импорта, но, похоже, ему нужен элемент управления, а cdkDrop не рассматривается как поле.
Пожалуйста, есть идеи о том, как использовать перетаскивание внутри angular materials .. или мне нужно переключить все компоненты на 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/app/cdk-drag-drop-horizontal-sorting-example.html
Мое исправление / обходной путь :
Я принял предложение использовать свойство visibility, но должен был добавить его в поле 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>
Ответ №1:
Для файла mat-FormFiled требуется MatFormFieldControl (мат-ввод или ввод), так как у вас есть *ngIf
, вы получили эту ошибку
В любом случае я не понимаю [(ngModel)]="todo.meeting"
в div????
ПРИМЕЧАНИЕ: вы можете использовать [style.visibility]="condition?'hidden':null
вместо *ngIf="condition"
этого, если вам нужен matInput
Комментарии:
1. Я пытался. Добавлен снимок экрана о том, почему я добавил ngModel в div. Я понимаю суть «необходимости», но мне нужно перетаскивать, поэтому ищу предложения