标签: angulardraganddroplists

我有2个数组。我正在实现一个 Angular 拖放，我想使用 FormArray 来保存元素被放入的数组。

问题是我无法将 formcontrol 应用于 div，因为它给出了错误

错误：没有名称为“语言”的表单控件的值访问器

这是html

      <div>

        <div class="example-container">
          <h2>Selected Languages</h2>
          <div
          cdkDropList
          #todoList="cdkDropList"
          [cdkDropListData]="anotherarray"
          [cdkDropListConnectedTo]="[doneList]"
          class="example-list"
          (cdkDropListDropped)="drop($event)"
           formControlName="language">
          <div class="list-group-item list-group-item-action " *ngFor="let item of anotherarray" cdkDrag>
            {{item}}
          </div>
        </div>
      </div>

      <div class="example-container">
        <h2>Available Languages</h2>

        <div
        cdkDropList
        #doneList="cdkDropList"
        [cdkDropListData]="testingarray"
        [cdkDropListConnectedTo]="[todoList]"
        class="example-list"
        (cdkDropListDropped)="drop($event)">
        <div class="list-group-item list-group-item-action " *ngFor="let item of testingarray" cdkDrag>{{item}}</div>
      </div>
      </div>

      </div>

      <button type="submit" class="btn btn-primary my-2" translate>saveButtonLabel
        <fa-icon *ngIf="saveIcon" [icon]="saveIcon" [spin]="saveIcon.iconName === 'spinner'"></fa-icon>
      </button>
    </form>

我正在使用 Google 的Angular 拖放列表，但我认为问题在于底层 HTML5 拖放功能不适用于 Angular ( v1.6.1 )。

根据MDN（底部的注释，在“完成拖动”下）：

如果在拖动期间移动或删除源节点（例如，在“drop”或“dragover”时），则不会调度“dragend”。 错误 460801

我正在更改“dragover”事件中的 Angular 模型，以在拖动操作期间显示反馈。我认为Angular 正在移动或删除（并重新创建）我的源元素，这就是阻止“dragend”触发的原因。

这意味着如果不成功，我无法知道拖动操作何时完成（成功时，目标元素上会触发“drop”事件）

有什么想法吗？

我正在使用Angular 拖放 CDK：

我能够将项目从一个容器拖放到另一个容器，反之亦然。现在，我试图不从容器中删除掉落的物品，但应该将其放入另一个容器中。

正如您在图片中看到的，我想将项目“回家”从“待办事项”容器拖动到“完成”容器。