Custom Component with ngFormio 3.x

[Morshed0308]

Hello all, I have made a custom component and added it in a new group.Code is given below

app.config(['formioComponentsProvider', function (formioComponentsProvider) {
    formioComponentsProvider.addGroup('amazing', { title: 'Custom Template Components' });

formioComponentsProvider.register('todaysDate', {
        title: 'Date Fields',
        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'
            }
        ]
    });
}]);

and then in the app.run

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

              $templateCache.put('formio/components/todaysDate/DateFieldDisplay.html', FormioUtils.fieldWrap('<div id ="customDateLoaderDirective" class ="customDateLoaderDirective" customdatakind-Loader></div>'));

              $templateCache.put('formio/components/todaysDate/validate.html',
                  '<ng-form>' +
                  '<form-builder-option property="validate.required"></form-builder-option>' +
                  '</ng-form>');

          }
]);

and then I added the directives like below

app.directive('todaysDate', function ($rootScope, $compile) {

    return {

        link: function (scope, $elm, $attr) {

        },
        controller: function ($scope, $rootScope, $compile) {
                  //////my logic here 
                };

        template: 
        '<select id="todaysDate" name="todaysDate"  class="form-control"  ng-options="date.id as date.Day for date in dateList" ng-model="dateToday" ng-change="SelectedDateChanged(dateToday, component.key)" ng-pristine ng-valid ng-empty ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid-required ng-touched todaysDate">' +
        '<option ng-option value="" >Select Date</option></select>'

    };

});

This is in a different file named customcomponent.js, there are some more component I have made in this file like this.

in the main page

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

I have referenced the ngFormiofull.js from this **

https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.js

and ngFormio 3.x in the script .
How can I Add this custom component show in the page after the formio components .

https://imgur.com/a/R6BrHIq

**

@prashant93 @travist @sonicos

[randallknutson]

You need to add the "amazing" group to the form. You can see the 'customBasic' group here: http://formio.github.io/formio.js/app/examples/custombuilder.html

[Morshed0308]

You need to add the "amazing" group to the form. You can see the 'customBasic' group here: http://formio.github.io/formio.js/app/examples/custombuilder.html

Can you please give some more details like how to view the template and how to work the app.run () and app.directive functions ? It would me much help if you can explain with my example. @randallknutson

[randallknutson]

We don't use the view templates in the directives anymore. You add them in the options like in the example I have listed.