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