Angular 6-将动态表单放在ngx可排序控件中
Angular 6-将动态表单放在ngx可排序控件中
提问于 2018-11-28 15:50:16
我正在为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>回答 1
Stack Overflow用户
发布于 2018-12-03 01:07:02
看起来你需要把"item“传递到你的动态表单中。
您可以通过执行以下操作来实现此目的
<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>然后，您的动态表单组件将从每个"items“传递所需的数据。
在动态组件上，您必须添加输入
@Input() item: any;
if (this.item) {
this.form.patchValue(this.item);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53523306
复制相关文章
点击加载更多
相似问题
连接到运行在VM上的火花
如何将我的Android设备连接到运行在OSX上的VM？
通过Qt5连接到VM中的数据库
如何从运行在VM中的DPDK连接到internet
将运行在gcloud VM上的Spring连接到云SQL实例
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
