Угловое падение CDK с (реактивной) форм - PullRequest
Новая
       10

Угловое падение CDK с (реактивной) форм

0 голосов
/ 08 ноября 2018

У меня есть этот пример: https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html

все работает, но при перетаскивании поле выбора сбрасывается до первого значения в списке.

есть ли способ это исправить? это только визуально, но довольно неприятно для пользователя. Я попытался использовать опцию cdkDragPreview, но не смог заставить ее работать.

Компонент: 

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'cdk-drag-drop-sorting-example',
  templateUrl: 'cdk-drag-drop-sorting-example.html',
  styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      title: ['title'],
      items: fb.array([
        fb.group({
          name: fb.control('1'),
          note: fb.control('quux')
        }),
        fb.group({
          name: fb.control('2'),
          note: fb.control('bar')
        }),
        fb.group({
          name: fb.control('3'),
          note: fb.control('baz')
        })

      ])
    })
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
    moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
  }

}

Шаблон: 

<form [formGroup]="myForm">
  <input formControlName="title" />
  <div cdkDropList id="foo" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag>
      <span cdkDragHandle>drag</span>
      <div [formGroup]="item">
        <input type="text" formControlName="name">
        <select formControlName="note">
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>quux</option>
        </select>
      </div>
    </div>
  </div>
  {{ myForm.value | json }}
</form>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Я пересмотрел ответ @Amir Fawzy, добавив переменную в текущую активную заметку, которая отображается при перетаскивании выбранного поля.

TS: 

activeNote: string;
enter(i) {
  this.activeNote = this.myForm.get('items')['controls'][i].get('note').value;
}

HTML: 

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag #elem="cdkDrag" (mouseenter)="enter(i)">
    <span cdkDragHandle>drag</span>
    <div [formGroup]="item">
      <input type="text" formControlName="name">
      <select formControlName="note">
        <option [hidden]="elem.moved">{{activeNote}}</option>
        <option>foo</option>
        <option>bar</option>
        <option>baz</option>
        <option>quux</option>
      </select>
    </div>
  </div>
</div>

Вот дубликат на Stackblitz ..

0 голосов
/ 08 ноября 2018

с вашим кодом все в порядке, ничего страшного, но эта проблема, если ее так назвать, вызвана drag-drop cdk, так как это поведение по умолчанию, как я знаю, но вы можете обойти это, чтобы улучшить его, чтобы он выглядел хорошо для пользователя.

попробуйте это 

<div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag #elem="cdkDrag">
  <span cdkDragHandle>drag</span>
  <div [formGroup]="item">
    <input type="text" formControlName="name">
    <select formControlName="note">
      <option [hidden]="elem.moved">dragging...</option>
      <option>foo</option>
      <option>bar</option>
      <option>baz</option>
      <option>quux</option>
     </select>
  </div>
</div>

что здесь произошло с вещами #elem="cdkDrag", добавленными для перетаскивания элемента как local reference
и <option [hidden]="elem.moved">dragging...</option>, что произойдет здесь, когда пользователь перетаскивает элемент dragging select option, покажет в select input, когда пользователь завершит перетаскивание его снова скроет и выберет входное значение, снова установив несколько CSS, это будет выглядеть хорошо.

...