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

Question

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

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

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

Answer 1

您给出的描述很简短，无法知道您的确切问题是什么？你能举一些代码例子吗？ 无论如何，我为您提供了一个小“路要走”的例子。 这是定义你的 Angular 应用程序。

 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:

}

});

希望这会有所帮助！