码迷,mamicode.com
首页 > 其他好文 > 详细

Angular动态表单生成(六)

时间:2018-03-03 15:21:50      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:idt   分析   ref   控件   使用   直接   round   第一时间   inline   

动态表单之根据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"
    }
]

Angular动态表单生成(六)

标签:idt   分析   ref   控件   使用   直接   round   第一时间   inline   

原文地址:https://www.cnblogs.com/baiyunchen/p/8496591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!