angular - 如何针对本质上动态的 JSON 创建 Angular FORM？

Question

假设今天我有一个包含 2 个字段的 JSON -

1.name

2.age

一个月后，该 JSON 中添加了一个新字段，假设 DOB。 2 个月后，又添加了一个字段 - address，它本身是 object 类型。

现在是 JSON

1.姓名

2.年龄

3.DOB

4.地址-

          4.1. PO
          4.2. City
          4.3. State

这里的场景是，JSON 每天都在变化，将来它也会变化。现在拥有手工制作的 UI(即每次添加新的输入字段)是一件痛苦的事情。

请告诉我一些方法或为此提供解决方案，我的 UI 将根据给定的 JSON 发生变化。

Answer 1

对于初学者来说，forms官方 Angular 文档中的部分非常有趣。由于您必须维护大而复杂的表格，因此我肯定会研究 reactive forms .它们不同于模板驱动的表单，因为它们是模型驱动的。对数据模型所做的任何更改都将使用可观察对象(流)的力量反射(reflect)在表单中。

当我们深入研究这个问题时，我们发现还有第三个概念叫做dynamic forms。 :

Building handcrafted forms can be costly and time-consuming, especially if you need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.

Angular 中的动态表单基本上是动态创建的响应式(Reactive)(模型驱动)表单。关键是用于呈现表单的元数据的动态数据绑定(bind)，无需对特定字段进行任何硬编码假设。这个概念很难掌握，但从长远来看绝对值得。我的建议是从 Angular 教程开始，这样您至少知道如何和为什么它有效。

回到你的问题；那里有图书馆为您完成了大部分艰苦的工作。你可能想看看 Formly . Formly 允许您使用动态表单的强大功能创建 JSON 支持的表单。创建表单字段非常简单:

{
    key: 'email',
    type: 'input',
    templateOptions: {
        type: 'email',
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
    }
}

为了更进一步，我构建了一个 form builder可用于通过链接方法生成形式兼容的 JSON 格式。它允许干净的代码和类型提示，从而不可能创建错误的格式字段配置。我们可以使用表单生成器创建与上面相同的字段:

builder
  .input('email', 'text')
  .label('Email address')
  .placeholder('Enter email')
  .required();

你可以玩form builder on StackBlitz .

祝你好运!