Javascript Angular 2+-以HTML形式动态添加DOM元素

我正在尝试创建一个用户可以用来创建自定义表单的页面。我将给用户一个下拉菜单。从该下拉菜单中，用户可以选择问题的类型-如文本框、单选按钮、复选框、日期等-然后根据该选择，我想将该类型的输入添加到我的DOM表单中。 在提交时，我想以JSON格式存储这些问题的值

有什么建议吗？解决这个问题的最佳方法是什么？我如何实现它？

看一看。我以前在一个项目中使用过它，它确实有助于创建表单

它甚至提供了一个功能，您可以使用它来存储表单/问题，包括以JSON格式提供的答案

---

旁注：我与上面提到的项目没有任何联系。

编辑：我觉得像这个stackblitz中的例子显示了你在动态表单和基本角度实用程序方面有多大的控制

反应形式是你的答案。做你想做的事没有完美的方法。但我从一个老项目中挑选了一个特别的例子。因此，有一点我检查了我的首选比较器的类型。之后，我检查是否需要一个需要简单输入字段或日期选择器的字段。有很多方法可以做到这一点

<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>

---

您不需要任何软件包，最好的方法是：

<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>

---

*ngIf的文档是

使用delta对象发送表单非常简单。默认情况下，它们已经作为JSON发送。我最初的问题是。。。为什么？该项目如何方便地创建动态表单？使用Angular提供的基本工具已经很容易了。编辑：我认为人们太快了，只给人们推荐一些绝对不必要的项目。在你建立一个依赖链之前，你应该试着使用你所得到的。这是最明智的答案。我真不敢相信人们会这么快就链接到任意的包和组件。

option1 = "false";
option2 = "false";