[英]Angular 2+ - Adding DOM elements dynamically in HTML FORM
I am trying to create a page which users can use to create custom forms. 我正在尝试创建一个页面,用户可以用来创建自定义表单。 I will be giving the user a drop-down menu. 我将为用户提供一个下拉菜单。 From that drop-down menu, user will be able to select the type of question - like text box, radio button, check box, date and etc. - and then based on that selection, I want to add that type of input into my DOM form. 从该下拉菜单中,用户将能够选择问题的类型-例如文本框,单选按钮,复选框,日期等-然后基于该选择,我想将该输入类型添加到我的DOM形式。 On submit, I want to store the value of these questions in JSON format. 提交后,我想以JSON格式存储这些问题的值。
Any suggestions? 有什么建议么? What is best approach to tackle this or how I can implement it? 解决此问题的最佳方法是什么?如何实现?
You don't need any package, the best way to do this is like this: 您不需要任何软件包,最好的方法是这样的:
<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>
And them in your component: 它们在您的组件中:
option1 = "false";
option2 = "false";
Have a look at ng-dynamic-forms . 看看ng-dynamic-forms 。 I've used it on a project before and it really helped creating forms dynamically . 我以前在项目中使用过它,它确实有助于动态创建表单。
It even provides an import / export functionality which you could use to store the form/questions including the provided answers in JSON format. 它甚至提供了导入/导出功能,您可以使用该功能来存储表单/问题,包括以JSON格式提供的答案。
sidenote: I am in no way connected to the mentioned project. 旁注:我与上述项目没有任何关系。
EDIT: I feel an example like in this stackblitz shows how much control you have in terms of dynamic forms with the basic Angular utilities. 编辑:我感觉像这样的一个例子,在这个堆叠闪电战中,您可以使用基本的Angular实用程序根据动态形式来控制多少控件。
https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html
Reactive Forms are your answer. 反应形式就是您的答案。 There is no perfect way to do what you want. 没有完美的方法可以做您想要的事情。 But I picked out a particular piece of an example from an old project. 但是我从一个旧项目中挑选了一个示例的特定部分。 So, on one point I check for the type of comparators I have available due to my first choice. 因此,有一点我会检查由于我的首选而可以使用的比较器类型。 After that I check if I need a field that requires a simple input field or a datepicker. 之后,我检查是否需要一个需要简单输入字段或日期选择器的字段。 There are SO many ways to do this. 有很多方法可以做到这一点。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.