动态添加和删除组件作为Angular中的表单域

Question

我在模板上有不同的按钮，例如输入，复选框，单选，按钮等，单击每个按钮应显示其对应的表单字段。

例如-单击输入按钮时，应动态创建输入按钮组件并显示它。并且该字段也具有删除按钮，单击删除按钮应将其对应的字段从dom中删除。

我具有动态生成组件的基本思想，需要帮助来完成上述方案。

呈现表单字段的示例对象结构如下所示：

[{
  "id": 1,
  "type": "TEXT_BOX",
  "label": "Input text box",
  "placeholder_text": "Enter your text here"
}, {
  "id": 2,
  "type": "TEXT_AREA",
  "label": "Input text area",
  "placeholder_text": "Enter your description here"
}]