Javascript Angular 7将新字段添加到表单

我有一个小表单，当用户单击一个元素时，我想在表单上显示更多的字段。此操作可以执行多次。因此，我的想法是有一个单独的html文件，其中包含要附加到表单中的这些字段，所以我得到了这个

public showMoreFields(): void {
    const wrapper_div = document.getElementById("wrapper");
    const template = require("./my-template.html")

    container.innerHTML += template
}

新字段正在正确追加

我的第一个问题是：这是加载外部html的最佳方法吗？（我没有“文本/模板”脚本标记）

或者我应该创建一个新组件并将其附加到maim表单中

....
<input type="text" .... />
<my-new-fields></my-new-fields>
...
<button></button>

---

谢谢

您可以在要隐藏的部分上使用*ngIf或[hidden]属性

例如：

<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>

1， 您可以使用组件中的标志在单击按钮时显示/隐藏数据：

在组件中：

showData: boolean = false;

在html中：

    <button (click)="this.showData=!this.showData">show/hide</button>

    <div *ngIf="this.showData">
        ...
    </div>

显示/隐藏
...

不，这是个可怕的主意。检查这个：你必须使用反应形式。看看这篇文章，这可能会对你有所帮助。但我可以有多个字段。因此，我需要附加dynamicallyIts，而不是一组字段。用户可以使用列表组件多次添加该字段组，其中包含

formArray

，您可以将

formGroup

添加到

formArray

。列表组件包含包含

formGroup

字段的组件。

    <button (click)="this.showData=!this.showData">show/hide</button>

    <div *ngIf="this.showData">
        ...
    </div>