Javascript 动态渲染窗体组件9

我有一个页面，显示有关对象的详细信息。左侧边栏包含对象列表，主区域包含详细信息。对象的详细信息分为多个类别。每个类别显示为一个手风琴，展开手风琴后，以属性和值的形式显示细节。通过API获取所有属性的详细信息和值的详细信息

现在我想通过单击按钮将手风琴切换到编辑模式。属性名称和值对将更改为属性名称和输入文本框/组合框。此外，每个要验证的属性都有regex验证器。在Angular 9中动态执行此操作的最佳方法是什么

我正在考虑使用老javascript从DOM树中删除details节点，并将其替换为input节点，然后对每个属性对执行此操作。但这不是完美的方式。我希望这是AngularJS中的一个反应式表单，当用户更改输入时，它可以动态执行验证。输入和验证的类型取决于从API获取的属性的元数据

我当前的HTML实现：

<div id="unique-accordion" class="alignWindow ui-accordion">
    <div class="accordion-item" *ngFor="let objectDetail of objectDetails | keyvalue:asIsOrder let i = index">
            <h3 class="accordion-title" >
                <button id="accordion-title-{{i}}" class="accordion-link" aria-expanded="false"
                    [attr.aria-controls]="'accordion-content-'+i"
                    (click)="onAccordionClick($event,i)">
                    {{ objectDetail.key | titlecase }}
                </button>
                <button class="btn" style="display: none;" id="edit-details-button-{{i}}" (click)="onEditClick($event,i)"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button>
            </h3>
    <div id="accordion-content-{{i}}" class="accordion-content" [attr.aria-labelby]="'accordion-title'+i"
        [attr.aria-expanded]="(toggle ? 'true' : 'false')">

        <div class="textfield textfield-inline" *ngFor="let detail of objectDetail.value | keyvalue">
            <label for="rule-name" class="textfield-label word-wrap-text">
                {{ detail.key }}
            </label>
            <span class="textfield_span word-wrap-text"> 
                {{ detail.value }} 
            </span>
        </div>
    </div>
</div>

{{objectDetail.key | titlecase}
{{detail.key}
{{detail.value}}

在typescript中，我获取API的详细信息，并填充变量，使其可用于模板。然后发生accordion click事件，将

aria expanded

属性更改为true或false，当accordion展开时，我将其编辑按钮设置为

display:block

我试过guide，但它完全独立创建表单。我希望表单元素嵌入到我当前的HTML实现中，即替换

detail.value

span到输入（将动态选择textbox或select），并显示submit按钮以代替当前的编辑按钮

有吗

---

我可以使用什么方法或功能来实现这一点？

您能告诉我们您到目前为止尝试了什么吗？@Zer0我已经添加了它。请看一看