Ваше описание очень короткое, чтобы понять, в чем именно заключается ваша проблема?Можете ли вы привести пример кода?В любом случае, я привожу вам небольшой пример.Это определяет ваше угловое приложение.
var app = angular.module('formioApp', ['ui.bootstrap', 'ui.select', 'formio', 'ngFormBuilder', 'ngJsonExplorer', 'ngFileUpload']);
Это схема для. Вы можете настроить ее по своему усмотрению.
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:
}
});
Надеюсь, это поможет!