Question

当前，我正在构建一个角度为4的动态表单，并且遇到了一个问题，那就是必须将字段拖放到表单区域中。

HTML

<div class="row col-12">
<div class="col-5">
    <div class=" card row col-12">
        <div class="card-header">
            Basic Fields
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-6" draggable="true" appDraggable [dragData]="{ data : 'shortAnswer' }" (onDragStart)="onDragStart($event)">
                    <i class="fa fa-arrows icon-drag fa-lg"></i>
                    <a>Short Answer</a>
                </div>
                <div class="col-6" draggable="true" appDraggable [dragData]="{ data : 'longAnswer' }" (onDragStart)="onDragStart($event)">
                    <i class="fa fa-arrows icon-drag fa-lg"></i>
                    <a>Long Answer</a>
                </div>
            </div>
            <div class="row">
                <div class="col-6" draggable="true" appDraggable [dragData]="{ data : 'section' }" (onDragStart)="onDragStart($event)">
                    <i class="fa fa-arrows icon-drag fa-lg"></i>
                    <a>Section</a>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="col-7">
    <div appDropTarget id="myForm" style="width: 100%; height: 600pc; border: 1px solid black;" (onDrop)="onDrop($event)" >
        fdffgdg
    </div>
</div>

我有一个名为appDraggable的自定义指令，该指令将帮助我拖动组件并且效果很好。而且我还有另一个名为appDropTarget的自定义指令，它将帮助我渲染组件并将其放置在该区域中。

每当在onDrop($event)中删除字段时，都会调用

appDropTarget。还有一个拖放服务，可以帮助我获取正在输入的数据。

TS

onDrop(event) {
  console.log(document.getElementById('myForm').children);
  if (event.data === 'section') {
    let r = document.createElement('div');
    r.setAttribute('id', 'sectionId');
    r.setAttribute('class', 'col-md-12 section');
    r.setAttribute('appDropTarget' , '');
    r.setAttribute('draggable', 'true');
    r.setAttribute('appDraggable','');
    r.setAttribute('style', ` background-color: #ccc;
    width: 100%;
    height: 30px; `);
    document.getElementById('myForm').appendChild(r);
  }else {
    let r = document.createElement('span');
    let y = document.createElement('INPUT');
    y.setAttribute('type', 'text');
    y.setAttribute('class', 'form-control');
    r.setAttribute('draggable','true');
    r.setAttribute('appDraggable','');
    y.setAttribute('placeholder', 'Contact');
    y.setAttribute('Name', 'textelement_' + 2);
    r.appendChild(y);
    r.setAttribute('id', 'id_' + 2);
document.getElementById('myForm').setAttributeNode(this.dragService.dropId)
.appendChild(r); // THIS IS WHERE IM FACING ISSUE
          }
        }

因此，正如我已经提到的，我需要在div内渲染一个表单字段，并且应该能够将子项附加到我动态创建的部分中

如何将表单元素呈现到该部分中？

编辑

所以，我的HTML应该看起来像这样

     <div>
     <!-- /// MAIN FORM DIV  -->
    <div id="sectionId" class="col-md-12 section" appdroptarget="" draggable="true" appdraggable="" style=" background-color: #ccc;
    width: 100%;
    height: 30px; ">
<!-- /// OTHER FORM ELEMENTS SHOULD RENDER -->
</div>
<!-- CAN HAVE MORE SECTIONS AND SECTION CONTAINS MORE FIELDS -->
</div>

Answer 1

“成角度的方式”将是使用数据绑定：

将表单的结构创建为模型
绑定视图到表单模型
更新模型

您的问题中没有足够的信息来创建完整的示例，但是以下内容应显示概念：

部分

12ns

FormContainerComponent

export interface Section {
  name: string;
  questions: Question[];
}

form-container.template.html

export class FormContainerComponent {
  questionnaire: Section[] = [];
}

现在，只需听一听滴滴，然后将元素添加到问卷中即可。视图将自动更新。

在FormContainerComponent中添加

<form>
  <div *ngFor="let section of questionnaire" class="section">
    <div *ngFor="let question of section;">
      <input type="text">
    </div>
  </div>
</form>

为控件使用不同的组件

假设您不希望始终只有一个html输入元素作为表单控件，则可以为每种“控件类型”创建一个角度组件，并创建诸如FormControlContainer之类的负责加载正确类型的东西。

要保留在调查表示例中：在“ QuestionComponent”上创建可以加载不同问题类型的示例，例如“ YesNoQuestionComponent”，“ SingleTextInputQuestionComponent”，…

https://angular.io/guide/dynamic-component-loader中对此进行了说明-只需将其“ AdBannerComponent”替换为“ QuestionComponent”，然后将问题类型视为“ AdItem”即可。

在Angular 4中的第n个子元素中创建div元素

1 个答案:

为控件使用不同的组件