如何使用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來完成？我可以通過添加className: "form-inline"創建一個簡單的在線形式：

的HTML：

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

的JavaScript：

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

，但我想不通的祕密武器來解決格式。我想，簡單的方法是將類類型添加到輸入和表單元素中，但是如何？如果可能的話，我想遠離自定義模板。

感謝大家的幫助。

Answer 1

我不知道這是否仍然有幫助。

我發現了formly網站記錄的例子： http://angular-formly.com/#/example/bootstrap-specific/bootstrap-horizontal

對於它的工作的重要（或這對我來說）注意到，只有type: 'horizontalInput'不會讓魔術。如文檔所述，需要在應用配置中配置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'] 
    }); 
    //... 
    });