<formly-form model="vm.model" fields="step.inputs" options="vm.options">
    <div style="text-align:right">
        <button type="submit" wz-next class="btn btn-primary submit-button" ng-disabled="innerForm.$invalid">Næste</button>
    </div>
</formly-form>

Using the above markup would generate a more og less standard formly form, but my issue is that based on values set in the templateOptions of my fields, i want to be able to add a class to the formly-field div.

So an example would be:

inputs: [
    {
        key: 'someKey',
        type: 'input',
        templateOptions: {
            label: 'some text',
            class: 'floatLeft'
        }
    },
    {
        key: 'someKey',
        type: 'input',
        templateOptions: {
            label: 'some text',
            class: 'floatRight'
        }
    }]

Should generate 2 formly-fields like these:

<div formly-field ng-repeat="field in fields " class="floatLeft ..." ...>...</div>
<div formly-field ng-repeat="field in fields " class="floatRight ..." ...>...</div>

So the class gets added to the div, i've tried using wrappers, but they dont wrap around the formly-field div. And since step.inputs is an array of fields, im not sure how to do it.

<formly-form model="vm.model" fields="step.inputs" options="vm.options">
    <div style="text-align:right">
        <button type="submit" wz-next class="btn btn-primary submit-button" ng-disabled="innerForm.$invalid">Næste</button>
    </div>
</formly-form>

Using the above markup would generate a more og less standard formly form, but my issue is that based on values set in the templateOptions of my fields, i want to be able to add a class to the formly-field div.

So an example would be:

inputs: [
    {
        key: 'someKey',
        type: 'input',
        templateOptions: {
            label: 'some text',
            class: 'floatLeft'
        }
    },
    {
        key: 'someKey',
        type: 'input',
        templateOptions: {
            label: 'some text',
            class: 'floatRight'
        }
    }]

Should generate 2 formly-fields like these:

<div formly-field ng-repeat="field in fields " class="floatLeft ..." ...>...</div>
<div formly-field ng-repeat="field in fields " class="floatRight ..." ...>...</div>

So the class gets added to the div, i've tried using wrappers, but they dont wrap around the formly-field div. And since step.inputs is an array of fields, im not sure how to do it.

• javascript
• angularjs
• angular-formly

1 Answer 1

To add classes to the formly-field div, you simply specify a className on the root of your field configuration. So:

inputs: [
    {
        key: 'someKey',
        type: 'input',
        className: 'floatRight',
        templateOptions: {
            label: 'some text'
        }
    },
    {
        key: 'someKey',
        type: 'input',
        className: 'floatRight',
        templateOptions: {
            label: 'some text'
        }
    }
]