Question

我尝试将自定义组件添加到ngFormBuilder，但是我找不到成功我正在使用angularjs 这个示例https://github.com/formio/ngFormBuilder对我不起作用

我发现了这个问题https://github.com/formio/ngFormBuilder/issues/135 但无法正常工作，运行此代码后所有表格都将清除

请帮助我解决这个问题，谢谢

Answer 1

您的描述很简短，不知道您的确切问题是什么？你能举一些例子吗？无论如何，我正在为您提供一个小小的“前进之路”示例。这是定义您的角度应用程序。

 var app = angular.module('formioApp', ['ui.bootstrap', 'ui.select', 'formio', 'ngFormBuilder', 'ngJsonExplorer', 'ngFileUpload']);

这是from的架构。您可以根据需要对其进行自定义。

  var formSchemaJSON = { "components": [{ "input": true, "tableView": true, "inputType": "text", "inputMask": "", "label": "Name", "key": "name", "placeholder": "", "prefix": "", "suffix": "", "multiple": false, "defaultValue": "", "protected": false, "unique": false, "persistent": true, "validate": { "required": false, "minLength": "", "maxLength": "", "pattern": "", "custom": "", "customPrivate": false }, "conditional": { "show": "", "when": null, "eq": "" }, "type": "textfield", "tags": [] }, { "input": true, "label": "Submit", "tableView": false, "key": "submit1", "size": "md", "leftIcon": "", "rightIcon": "", "block": false, "action": "submit", "disableOnInvalid": false, "theme": "primary", "type": "button", "tags": [], "conditional": { "show": "", "when": null, "eq": "" } }], "display": "form", "page": 0, "numPages": 1 };

这是您的角度控制器

 app.controller('formioAppCtrl', ['$scope', '$http', '$rootScope', 'Upload', '$compile', 'formioComponents', '$timeout', function ($scope, $http, $rootScope, Upload, $compile, formioComponents, $timeout) {
    $rootScope.form = formSchemaJSON;

现在，您必须将其放在html页面中，您希望表单生成器显示在

<form-builder form="form" options="{ noSubmit: true }"></form-builder>

现在，如果要添加自定义组件，则最好创建一个新的js文件，并将其添加到新组中，像这样并注册该组件。

 app.config(['formioComponentsProvider', function (formioComponentsProvider) {

        formioComponentsProvider.addGroup('amazing', { title: 'Custom Template Components' });
    formioComponentsProvider.register('todaysDate', {
            title: 'Date Fields',
            //template: 'formio/components/todaysDate/todaysDate.html',
            template: 'formio/components/todaysDate.html',
            controller: ['$scope', '$rootScope', function ($scope, $rootScope) {
                $scope.setValue = function (value) {
                    $scope.data[$scope.component.key] = value;
                };
            }],

            group: 'amazing',
            icon: 'fa fa-calendar',
            settings: {
                input: true,
                label: '',
                tableView: true,
                key: 'todaysDate',
                // key:'columns',
                size: 'md',
                leftIcon: '',
                rightIcon: '',
                block: false,
                //action: 'submit',
                disableOnInvalid: false,
                theme: 'primary',
                type: 'todaysDate',
                dataSource: "",
                columns: [{
                    components: [{ "input": true, "tableView": true, "inputType": "text", "inputMask": "", "label": "", "key": "todaysDate", "dataSource": "", "placeholder": "", "prefix": "", "suffix": "", "multiple": true, "defaultValue": "", "protected": false, "unique": false, "persistent": true, "validate": { "required": false, "minLength": "", "maxLength": "", "pattern": "", "custom": "", "customPrivate": false }, "conditional": { "show": "", "when": null, "eq": "" }, "type": "textfield", "tags": [] }]
                }

                ],
                validate: {
                    required: false,
                    multiple: '',
                    custom: ''
                },
                conditional: {
                    show: null,
                    when: null,
                    eq: ''
                }


            },
            controller: ['$scope', '$rootScope', function ($scope, $rootScope) {
                var settings = $scope.component;
                //settings.hideLabel = true;
            }],
            views: [
                {
                    name: 'Display',
                    template: 'formio/components/todaysDate/DateFieldDisplay.html'
                },
                {
                    name: 'Validation',
                    template: 'formio/components/todaysDate/validate.html'
                }
            ]
        });
}






app.run([
              '$templateCache',
              'FormioUtils',
              function ($templateCache, FormioUtils) {
     $templateCache.put('formio/components/todaysDate.html', FormioUtils.fieldWrap('<div id ="todaysDateDirective" class ="todaysDateDirective" todays-Date></div>'));

    }

现在是您的指令

app.directive('todaysDate', function ($rootScope, $compile) {
return {
link:
controller:
template:

}

});

希望这会有所帮助！

如何添加自定义组件ngFormBuilder Form.io

1 个答案: