如何使用角度模式创建真正的动态表单

时间:2016-08-03 19:21:12

标签: javascript angularjs angular-schema-form

我正在尝试创建一个动态生成模式表单的模式。

我只允许3-4种不同的类型(清单,字符串,图像,收音机)。

在单独的管理界面中,用户定义模板,我根据这些对象构建表单。

这是我到目前为止所得到的,但没有生成任何形式。请记住,这是我第一次使用架构表单。

  $scope.model = [];

  $scope.schema = [];


  $scope.form = [

  ]; 

 function BuildDynamicForm(item){

    $('#dynamicFormDiv').empty();
    // go through each group and build a panel and list for each groups and fields

    angular.forEach(item.FormGroups, function(value,key){

        var newModel = {};  

        var newSchema = {
            type: 'object',
            properties: {
            }  
        };

        var newForm = [

        ];

        var groupIndex = key;


        // build dynamic form on a md-card
        if(value.Group != undefined){

            var template = '<md-card> ' +
                '<form>' +
                    '<p>' + value.Group.GroupName + '</p>' +
                    '<div sf-schema="schema['+ groupIndex +']" sf-form="form[' + groupIndex +']" sf-model="model['+ groupIndex +']">' +
                '</form>' +
            '</md-card>'

            $('#dynamicFormDiv').append(template);

            // go through each group field
            angular.forEach(value.Group.GroupFields, function(value, key){

                var fieldType = value.Field.Type;

                switch (fieldType) {
                    case 'Checkbox':

                        var newProperty = {
                            type: 'array',
                            items: {
                                type: 'string',
                                enum: []
                            }
                        }

                        // go through field options to create enum list
                        if(value.Field.FieldOptions.length > 0){

                            var propArray = []; 
                            var titleMapArray = [];

                            angular.forEach(value.Field.FieldOptions, function(value, key){
                                propArray.push(value.Id);
                                titleMapArray.push({value: value.Id, name: value.Value})

                            });

                            newProperty.items.enum = propArray;
                        }


                        eval('newSchema.properties.checklist' + key + '= newProperty;');

                        var newFormObject = {
                             key: 'checklist' + key,
                             type: 'checkboxes',
                             titleMap: titleMapArray
                        };

                        newForm.push(newFormObject);

                        break;

                    default:
                        break;
                }

            });


        }            


        $scope.model.push(newModel);
        $scope.schema.push(newSchema);
        $scope.form.push(newForm);

    });

    // add the finalize panel and fields
}

0 个答案:

没有答案