Horizontal form

[dmatesic]

How would I make the form horizontal? http://getbootstrap.com/css/#forms-horizontal

[kentcdodds]

Like this :-)

[kentcdodds]

Let me know if you need any more help :-)

[markleusink]

Updated URL to that example: http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal

[kentcdodds]

👍 thanks! Updating the original link as well.

[robrothedev]

Just started using Angular Formly about 3 hours ago and needed a horizontal form. Talk about perfect timing :) Got it working like a charm and added a horizontalSelect type to boot. Thanks again!

[robrothedev]

One thing I did notice, however, is that the templateOptions: {required: true} no longer provides the asterisk next to the label. I can manually add it to '{{to.label}} *' for a workaround in the setWrapper template.

[kentcdodds]

Yeah, I updated the example: http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal

[robrothedev]

Works great. Thanks!

[tarkanlar]

how can i make horizontalSelect ?

[robrothedev]

Per the documentation added here: http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal you can add a formlyConfigProvider.setType({}) for a select.

angular
    .module('app',['formly','formlyBootstrap'])
    .config(config);

function config(formlyConfigProvider) {
    // custom configuration for the formly templates
    formlyConfigProvider.setWrapper({
        name: 'horizontalBootstrapLabel',
        template: [
            '<label for="{{::id}}" class="col-sm-2 control-label">',
            '{{to.label}}  {{to.required ? "*" : ""}}',
            '</label>',
            '<div class="col-sm-9">',
            '<formly-transclude></formly-transclude>',
            '</div>'
        ].join(' ')
    });

    // horizontal inputs
    formlyConfigProvider.setType({
        name: 'horizontalInput',
        extends: 'input',
        wrapper: ['horizontalBootstrapLabel', 'bootstrapHasError']
    });

    // horizontal selects
    formlyConfigProvider.setType({
        name: 'horizontalSelect',
        extends: 'select',
        wrapper: ['horizontalBootstrapLabel', 'bootstrapHasError']
    });
}

HTML

<form class="form-horizontal">
  <formly-form
     model="ctrl.form_model"
     fields="ctrl.form_fields">
  </formly-form>
</form>

[tarkanlar]

Thanks @robrothedev, i should have seen that , sorry

[robrothedev]

Not a problem and you're welcome.