Angular动态表单生成（六）

动态表单之根据Json生成表单

我们在实际的使用中，动态表单往往是由服务器端的一系列配置，然后返回数据给客户端，最后客户端根据数据来动态的生成表单。那么怎么像我们上面所描述的这样，生成一个可以让我们的客户端解析，并且可以用于服务器与客户端传输的字符呢？

我第一时间能想到的最直接的办法，就是生成一些列数据，这些数据中包含客户端我们在构造FormModel时每个控件中需要的属性，最终客户端去判断控件的类型，并new不同的控件，然后push到formModel中~

那究竟在ng-dynamic-forms这个控件中如何根据Json生成呢？

原来如此

不知道在前面分析源码的时候，您有没有注意到，源码中core/model中的所有控件的模型定义，大部分属性前面都加了@serializable() 这样一个装饰器，javascript中序列化这个词提及的可能并不多，但是熟悉其他语言的同学看到这个可能就兴奋了，因为只要提到序列化，那就基本上是为了存储和传输的，比如我们常说的，将某个对象序列化成Json，序列化成XML等等，既然作者给这些属性加了这个装饰器，那么说明这些属性基本上是可以序列化的，我们可以尝试将我们定义的formModel序列化成JSON,并在控制台打印,我们在ngOninit中添加如下代码：

ngOnInit() {
    this.formGroup = this.formService.createFormGroup(this.formModel);

    console.log(JSON.stringify(this.formModel));
  }

然后待浏览器自动刷新后，在开发者工具的控制台中查看，发现确实生成了一堆的JSON，大概如下：

看到这里，是不是恍然大悟，哦，原来如此！！！

formService.fromJSON

既然能从对象转换成JSON,那就能从JSON转换成对象。而且ng-dynamic-forms给我们提供了更为方便的方法来让我们通过JSON创建表单。

这个方法位于源码中Core/Service/DynamicFormService中，方法名字为fromJSON，他的用法很简单，就是根据一个JSON，来生成一个formModel，供我们创建表单时使用。

为了尝试通过从JSON生成表单，我们将上面序列化出来的JSON复制出来，贴到代码中并赋值给一个变量（看着很恶心？没关系，吐完接着调试），然后调用formService.fromJSON方法创建模型。

大概代码如下：

ngOnInit() {
    const formJson = '那串恶心的JSON字符串';

    const fromJsonModel = this.formService.fromJSON(formJson);

    this.formGroup = this.formService.createFormGroup(fromJsonModel);

    console.log(JSON.stringify(fromJsonModel));
  }

待页面刷新后，我们会发现，通过JSON生成的表单，和刚才我们序列化JSON时所用的表单的效果是完全一样的~

6666~

当然，JSON的内容不是必须要通过对象序列化来得到，我们完全可以自己去在服务器端组装一个DynamicFormControlModel结构相同的JSON数据即可，具体有哪些属性可以用，可以自己去扒一下Core中定义的那一堆Model，看他们里面有那些可以序列化的属性~

比如下面这样：

[
    {
        "type": "INPUT",
        "id": "sampleInput",
        "label": "Sample Input",
        "maxLength": 42,
        "placeholder": "Sample input"
    },
    {
        "type": "RADIO_GROUP",
        "id": "sampleRadioGroup",
        "label": "Sample Radio Group",
        "options": [
            {
                "label": "Option 1",
                "value": "option-1",
            },
            {
                "label": "Option 2",
                "value": "option-2"
            },
            {
                "label": "Option 3",
                "value": "option-3"
            }
        ],
        "value": "option-3"    
    }
    {
        "type": "CHECKBOX",
        "id": "sampleCheckbox",
        "label": "I do agree"
    }
]