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"
    }
]