时间戳

首页 > 解决方案 > Angular 6 - 在 ngx-sortable 控件中放置一个动态表单

angular - Angular 6 - 在 ngx-sortable 控件中放置一个动态表单

问题描述

我正在为 Angular 6 中的布局而苦苦挣扎。

我有一个在运行时动态添加的表单组件。

我也有 ngx-sortable，我希望动态内容包含在其中，但不能完全弄清楚如何。

可排序控件

 <ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
          <ng-template let-item>
              <!-- sortable items here?? -->
          </ng-template>
   </ngx-sortable>

动态形式

<app-attraction-text></app-attraction-text>

我曾尝试将动态表单的标签放在可排序控件中，但控件中没有任何内容。有没有人这样做过谁可以提出正确的方法？

只是为了提供一些上下文，这里是动态控件的 html，我可以单击一个按钮并根据需要创建尽可能多的这些，然后我希望能够对它们进行排序。

<form [formGroup]='contentForm' style="margin-top:30px">
    <div formArrayName='content'>
        <div *ngFor="let formGroup of contentLines.controls; let i = index">
            <div class="card text-left">
                <div class="card-header text-secondary">Attraction Text
                  <img  align="right" class="pull-right table-header-padding" src="assets/images/LockLineIcon.png" />
                  <img  class="float-right text-danger icon-pad draft-icon-indent" src="assets/images/DeleteIcon.png" (click)="delete(i)"/>
                </div>
                <div class="card-body" >
                  <textarea  id="text" name="text" type="text" class="form-control" required maxlength="2048" ></textarea>
                </div>
                <div class="card-footer">
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddParagraphIcon.png" (click)="add();" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddQuoteIcon.png" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddHighlightTextIcon.png" (click)="AddHighlight()"/>
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/addimage.png" (click)="AddImage()"/>
                    <img align="right" class="pull-right table-header-padding" src="assets/images/DragUpDownIcon.png" />
                </div>
            </div>
        </div>
    </div>
</form>

标签： angularhtml

解决方案

看起来您需要将“项目”传递到您的动态表单中。

您可以通过执行以下操作来实现此目的

 <ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
      <ng-template let-item>
          <app-attraction-text [item]="item"></app-attraction-text>
      </ng-template>
</ngx-sortable>

然后，您的动态表单组件将从“项目”中的每个组件传递所需的数据。

在您的动态组件上，您必须添加输入

@Input() item: any;

if (this.item) {
    this.form.patchValue(this.item);
}

推荐阅读