Question

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

1.name

2.age

一个月后，假设DOB已向该JSON添加了一个新字段。 2个月后，又添加了一个字段-address，其类型本身为 object 。

立即使用JSON

1.name

2.age

3.DOB

4.address-

          4.1. PO
          4.2. City
          4.3. State

这里的场景是，JSON每天都在变化，将来它也可能会变化。现在有了手工制作的用户界面（即每次都添加新的输入字段）是一种痛苦。

请告诉我一些方法或为此提供解决方案，其中我的UI将根据给定JSON进行更改。

Answer 1

对于初学者来说，Angular官方文档中的forms部分提供了不错的阅读内容。由于您必须维护大型且有些复杂的表单，因此我将明确研究reactive forms。它们与模板驱动的表单不同，因为它们是模型驱动的。对数据模型所做的任何更改都将利用可观察对象（流）的力量以表格的形式反映出来。

当我们深入研究该问题时，我们发现有一个名为dynamic forms的第三个概念：

构建手工制作的表单可能既昂贵又费时，特别是如果您需要大量手工表单，它们彼此相似，并且经常更改以适应快速变化的业务和法规要求。

Angular中的动态形式基本上是动态创建的反应性（模型驱动）形式。关键是用于元数据的动态数据绑定，这些元数据用于呈现表单而无需对特定字段进行任何硬编码的假设。这个概念很难掌握，但从长远来看绝对值得。我的建议是从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。

祝你好运！

如何根据自然动态的JSON创建Angular FORM？

1 个答案: