Add custom fields but avoid angularjs formly wrapper when render form

I created two angularjs formly custom field with custom template.

    name: '


'' });

    name: 'wrapper-end',
    template: '</div>'

What I want is use them for Wrap other Angularjs formly field between this two custom fields so We can group and separate groups of fields visually by wrapping them in layers that will be given appearance with css.

But Angularjs formly render all custom field with extra div and even close my no closed tag in my custom template fields.

This is what a need to render formly:

<div class="tag-wrapper-init">

...... some AngularJs formly fields like inputs and textareas ....


How can I create custom fields in AngularJs formly so I avoid Formly Wrap them with a

<div formly-field="" ...

Is this possible?

I have tried to make clear the idea of what I need but if I have not done well or it is not understood, comment on it to improve it but please need help on this.


1 Answers Add custom fields but avoid angularjs formly wrapper when render form

Hi bellow is the example

<!DOCTYPE html>

        body {
            margin: 20px

        .formly-field {
            margin-bottom: 16px;
    <!-- Twitter bootstrap -->
    <link href="//" rel="stylesheet">

    <!-- apiCheck is used by formly to validate its api -->
    <script src="//[email protected]/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//"></script>

    <!-- This is the latest version of formly core. -->
    <script src="//[email protected]/dist/formly.js"></script>
    <!-- This is the latest version of formly bootstrap templates -->
    <script src="//[email protected]/dist/angular-formly-templates-bootstrap.js"></script>

    <!-- bring in angular-xeditable -->
    <link href="" rel="stylesheet">
    <script src=""></script>

    <title>Angular Formly Example</title>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
        <h1>angular-formly example: {{vm.exampleTitle}}</h1>
            This example shows how you integrate angular-formly with <a href="">angular-xeditable</a>.
            angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
        <hr />
        <form novalidate>
            <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
                <!-- button to show form -->
                <button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
                <!-- buttons to submit / cancel form -->
                <span ng-show="vm.form.$visible">
                    <button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
                    <button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
        <hr />
        <h2>Model Value</h2>
        <pre>{{vm.model | json}}</pre>
        <h2>Fields <small>(note, functions are not shown)</small></h2>
        <pre>{{vm.originalFields | json}}</pre>

    <div style="margin-top:30px">
            This is an example for the
            <a href="">angular-formly</a>
            project made with ♥ by
                <span ng-if="! || !">
                    {{ || 'anonymous'}}
                <a ng-if="" ng-href="{{}}">
            <br />
            This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"

    <!-- Put custom templates here -->
        (function () {

            'use strict';

            var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);

   (editableOptions, formlyConfig) {
                editableOptions.theme = 'bs3';

                    extends: 'input',
                    template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
                    name: 'editableInput'

            app.controller('MainCtrl', function MainCtrl(formlyVersion) {
                var vm = this;
                // funcation assignment
                vm.onSubmit = onSubmit;

                // variable assignment
       = { // optionally fill in your info below :-)
                    name: 'Kent C. Dodds',
                    url: ''
                vm.exampleTitle = 'angular-xeditable integration'; // add this
                vm.env = {
                    angularVersion: angular.version.full,
                    formlyVersion: formlyVersion

                vm.model = { text: 'This is editable!' };
                vm.options = {};

                vm.fields = [
                        key: 'text',
                        type: 'editableInput',
                        templateOptions: {
                            label: 'Text'

                vm.originalFields = angular.copy(vm.fields);

                // function definition
                function onSubmit() {
                    alert(JSON.stringify(vm.model), null, 2);



4 months ago