anuglarjsとformlyを使用してインライン（フォーム水平）ブートストラップフォームを作成するにはどうすればよいですか？

Question

ブートストラップフォームを静的HTML/AngularjsからFormlyおよびAngularjSに移動したいと思います。ここで私は、現在のフォームを作成する方法である：

<div class="col-md-12"> 
    <form role="form" name="myForm" class="form-horizontal" > 
     <div class="form-group"> 
      <label for="qgOrder" class="col-md-3 control-label">Group Order</label> 
      <div class="col-md-3"> 
       <input id="qgOrder" 
         name="qgOrder" 
         ng-model="qG.qgOrder" 
         type="number" 
         class="form-control" 
         /> 
      </div> 
     </div> 
     <!-- Additional <divs> repeated for additional input fields --!> 
    </form> 
</div> 

これは、ラベルや必要に応じてクラスを使用して入力フォーム入力フォームにブートストラップラベルにcol-md-3とcol-md-xxから属性の両方のアライメントが可能になります。

どうすればangular-formlyでこれを行うことができますか？

HTML：：

<div class="col-xs-12"> 
    <form > 
     <formly-form model="vm.user" fields="vm.form"></formly-form> 
    </form> 
</div> 

Javascriptを：私はclassName: "form-inline"を追加することにより、簡単なのインラインフォームを作成することができます

vm.form = [{ 
    key: 'UserName', 
    type: 'input', 
    className: 'form-inline', 
    templateOptions: { label: 'User' } 
}]; 

を私は修正するために秘密のソースを把握することはできませんフォーマット。簡単な方法は、入力とフォームの両方の要素にクラス型を追加することですが、どうすればよいでしょうか？可能であれば、カスタムテンプレートから離れていきたいと思います。

ご協力いただきありがとうございます。

Answer 1

これはまだ役立つかどうかわかりません。

私はformlyサイトに記載例が見つかりました：それは唯一type: 'horizontalInput'は魔法をすることはありませんことに注意することがその重要な（あるいは、それは私のためだった）を動作させるために http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal

。文書化されているように、アプリケーション設定内でformlyConfigProviderを設定する必要があります。私のためには：

angular.module('appName', [ 
    ... 
    'formly', 
    'formlyBootstrap', 
    ... 
]).config(function ($urlRouterProvider, $locationProvider, formlyConfigProvider) { 
    //.. other configuration... 
    // set templates here 
    formlyConfigProvider.setWrapper({ 
     name: 'horizontalBootstrapLabel', 
     template: [ 
     '<label for="{{::id}}" class="col-sm-2 control-label">', 
     '{{to.label}} {{to.required ? "*" : ""}}', 
     '</label>', 
     '<div class="col-sm-8">', 
     '<formly-transclude></formly-transclude>', 
     '</div>' 
     ].join(' ') 
    }); 

    formlyConfigProvider.setWrapper({ 
     name: 'horizontalBootstrapCheckbox', 
     template: [ 
     '<div class="col-sm-offset-2 col-sm-8">', 
     '<formly-transclude></formly-transclude>', 
     '</div>' 
     ].join(' ') 
    }); 

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

    formlyConfigProvider.setType({ 
     name: 'horizontalCheckbox', 
     extends: 'checkbox', 
     wrapper: ['horizontalBootstrapCheckbox', 'bootstrapHasError'] 
    }); 
    //... 
    });