Angular 2+ - 在 HTML FORM 中动态添加 DOM 元素
Posted
技术标签:
【中文标题】Angular 2+ - 在 HTML FORM 中动态添加 DOM 元素【英文标题】:Angular 2+ - Adding DOM elements dynamically in HTML FORM 【发布时间】:2019-02-22 09:02:54 【问题描述】:我正在尝试创建一个用户可以用来创建自定义表单的页面。我将为用户提供一个下拉菜单。从该下拉菜单中,用户将能够选择问题的类型——如文本框、单选按钮、复选框、日期等——然后基于该选择,我想将该类型的输入添加到我的DOM 形式。 提交时,我想以 JSON 格式存储这些问题的值。
有什么建议吗?解决这个问题的最佳方法是什么,或者我该如何实施?
【问题讨论】:
使用增量对象quilljs.com/docs/delta 发送表格非常简单。默认情况下,它们已作为 JSON 发送。 【参考方案1】:你不需要任何包,最好的方法是这样的:
<div ngbDropdown class="nav-item dropdown cursor">
<a class="nav-link" ngbDropdownToggle>
DropDown
</a>
<div ngbDropdownMenu class="dropdown-menu">
<a class="dropdown-item" (click)="option1 = !option1">
Form 1
</a>
<a class="dropdown-item" (click)="option2 = !option2">
Form 2
</a>
</div>
</div>
<form #form="ngForm">
<div class="form-option1" *ngIf="option1Selected">
<!-- YOUR FORM 1 -->
</div>
<div class="form-option2" *ngIf="option2Selected">
<!-- YOUR FORM 2 -->
</div>
...
<button type="submit"></button>
</form>
它们在你的组件中:
option1 = "false";
option2 = "false";
*ngIf
的文档是here
【讨论】:
这里是最明智的答案。我不敢相信人们能如此快速地简单地链接一些任意的包和组件。【参考方案2】:看看ng-dynamic-forms。我之前在一个项目中使用过它,它确实有助于创建表单dynamically。
它甚至提供了import / export 功能,您可以使用它来存储表单/问题,包括以 JSON 格式提供的答案。
旁注:我与提到的项目没有任何关系。
【讨论】:
我最初的问题是……为什么?这个项目如何使创建动态表单变得更容易?使用 Angular 提供的基本工具已经很容易了。编辑:我认为人们太快给人们推荐一些绝对不必要的项目。在你建立一个依赖链之前,你应该尝试使用你得到的东西。【参考方案3】:编辑:我觉得这个 stackblitz 中的一个例子显示了您在使用基本 Angular 实用程序的动态表单方面拥有多少控制权。
https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html
响应式表单是您的答案。没有完美的方法来做你想做的事。但我从一个旧项目中挑选了一个特定的例子。因此,在某一点上,我检查了由于我的第一选择而可用的比较器类型。之后,我检查是否需要一个需要简单输入字段或日期选择器的字段。有很多方法可以做到这一点。
<div class="col-7">
<!-- Text Input Field for most cases that don't involve time comparisons -->
<div *ngIf="!doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
<div class="string-input-field" formArrayName="values">
<div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">
<div class="input-group">
<input formControlName="value" type="text" class="form-control py-0" placeholder="Search for...">
</div>
</div>
</div>
</div>
<!-- Date Input Field -->
<div *ngIf="doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
<div class="string-input-field row" formArrayName="values">
<div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">
<div *ngIf="j === 0" class="input-group mb-3">
<input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
[owlDateTime]="dt3">
<owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
<div class="input-group-append">
<span class="input-group-text" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px" id="date-for-input">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
<div *ngIf="j === 1" class="input-group mb-3">
<input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
[owlDateTime]="dt3">
<owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
</div>
</div>
</div>
</div>
</div>
【讨论】:
以上是关于Angular 2+ - 在 HTML FORM 中动态添加 DOM 元素的主要内容,如果未能解决你的问题,请参考以下文章
Angular 6:无法使用 form.value | 检索 HTML 中的所有表单控件值json