如何使用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'] 
    }); 
    //... 
    });