Draggable formGroups в formArray (реактивные формы) - PullRequest
Новая
       18

Draggable formGroups в formArray (реактивные формы)

0 голосов
/ 15 мая 2019

В модуле углового перетаскивания они предоставили документацию для функции moveItemInArray (), с помощью которой мы можем перетаскивать содержимое только в массиве. но как мы могли бы перемешать (formGroups / formControls) в formArray?

Даже я попробовал эту функцию moveItemInFormArray (), как упомянуто здесь https://github.com/angular/angular/issues/27171., но я не могу заставить ее работать.

groupDrag.component.html 

    <form [formGroup]="exampleForm">
      <div formArrayName="formUnits" cdkDropList (cdkDropListDropped)="drop($event)" *ngFor="let unit of exampleForm.controls.formUnits.controls; let i=index" class="rowGroup">
        <div [formGroupName]="i" class="basic-container" cdkDrag>
          <div class="row row-container" >
            <button type="button" class="drag-handle" mat-icon-button cdkDragHandle>
              <mat-icon>unfold_more</mat-icon>
            </button>

            <!-- label input field -->
            <mat-form-field  class="col-lg-4"> 
              <input matInput placeholder="Please enter label without spaces" formControlName="label" required>  
            </mat-form-field>

            <!-- options input field -->
              <mat-form-field  class="col-lg-3"> 
                <input matInput placeholder="Enter Placeholdertext" formControlName="placeholder">
             </mat-form-field>

          </div>
        </div>
      </div>
    </form>

groupDrag.component.ts 

drop(event: CdkDragDrop<FormGroup[]>) {
  console.log('drop event triggers')
  this.formArray = this.exampleForm.get('formUnits') as FormArray;
  const from = event.previousIndex;
  const to = event.currentIndex;
  this.moveItemInFormArray(this.formArray, from, to)
}

/**
* Moves an item in a FormArray to another position.
* @param formArray FormArray instance in which to move the item.
* @param fromIndex Starting index of the item.
* @param toIndex Index to which he item should be moved.
*/
moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void {
  const from = this.clamp(fromIndex, formArray.length - 1);
  const to = this.clamp(toIndex, formArray.length - 1);

  if (from === to) {
    return;
  }

  const delta = from > to ? 1 : -1;
  for (let i = from; i * delta < to * delta; i += delta) {
    const previous = formArray.at(i);
    const current = formArray.at(i + delta);
    formArray.setControl(i, current);
    formArray.setControl(i + delta, previous);
  }
}

/** Clamps a number between zero and a maximum. */
clamp(value: number, max: number): number {
  return Math.max(0, Math.min(max, value));
}
...