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

我不知道这是否仍然有用。

我在形式网站上找到了一个记录的示例： 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']
    });
    //...
  });

如何使用angularjs和formly创建内联（表单水平）引导程序表单？

1 个答案: