Merge pull request #529 from benoror/master

feat(fieldGroup): allow wrapper & templateOptions

Author: Kent C. Dodds

src/directives/formly-field.js

@@ -258,7 +258,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
       if (scope.options.key) {
         modelValue = `model['${scope.options.key}']`
       }
-      setElementTemplate(`
+      getTemplate(`
           <formly-form model="${modelValue}"
                        fields="options.fieldGroup"
                        options="options.options"
@@ -268,6 +268,8 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
                        is-field-group>
           </formly-form>
         `)
+        .then(transcludeInWrappers(scope.options, scope.formOptions))
+        .then(setElementTemplate)
     }
 
     function addAttributes() {

src/directives/formly-form.test.js

@@ -280,6 +280,48 @@ describe('formly-form', () => {
       })
     })
 
+    it(`should be possible to use a wrapper & templateOptions in a fieldGroup`, () => {
+      formlyConfig.setWrapper({
+        name: 'panel',
+        template: `<div class="panel">
+            <div class="heading">
+              Panel Title: {{options.templateOptions.title}}
+            </div>
+            <div class="body">
+              <formly-transclude></formly-transclude>
+            </div>
+          </div>
+        `,
+      })
+
+      scope.fields = [
+        {
+          className: 'field-group',
+          wrapper: 'panel',
+          templateOptions: {
+            title: 'My Panel',
+          },
+          fieldGroup: [
+            getNewField(),
+            getNewField(),
+          ],
+        },
+      ]
+
+      scope.options = {}
+
+      compileAndDigest()
+
+      const panelNode = el[0].querySelector('.panel')
+      expect(panelNode).to.exist
+      const bodyNode = panelNode.querySelector('.body')
+      expect(bodyNode).to.exist
+      const headingNode = panelNode.querySelector('.heading')
+      expect(headingNode).to.exist
+      const headingEl = angular.element(headingNode)
+      expect(headingEl.text().trim()).to.eq('Panel Title: My Panel')
+    })
+
     it(`should be possible to hide a fieldGroup with the hide property`, () => {
       compileAndDigest()
 

src/providers/formlyApiCheck.js

@@ -179,6 +179,8 @@ const fieldGroup = apiCheck.shape({
   fieldGroup: apiCheck.arrayOf(apiCheck.oneOfType([formlyFieldOptions, apiCheck.object])),
   className: apiCheck.string.optional,
   options: formOptionsApi.optional,
+  templateOptions: apiCheck.object.optional,
+  wrapper: specifyWrapperType.optional,
   hide: apiCheck.bool.optional,
   hideExpression: formlyExpression.optional,
   data: apiCheck.object.optional,