Angular动态表单生成（六）

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

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

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

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

原来如此

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

ngOnInit() {this.formGroup = this.formService.createFormGroup(this.formModel);console.log(JSON.stringify(this.formModel));}

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

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

.

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

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

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

大概代码如下：

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的内容不是必须要通过对象序列化来得到，我们完全可以自己去在服务器端组装一个del结构相同的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"}
]