'form-control' class 在使用 autoForm 时在哪里设置，Bootstrap 4？

Question

我正在为我的 Meteor 项目中的 afQuickfield 设计自定义 autocomplete 类型。我遇到的问题是，当我在 afQuickfield 上设置 type="autocomplete" 时，缺少 class="form-control" 属性。对于所有其他字段类型，它都包含在内。

我在 meteor-autoform 的整个代码库以及 bootstrap 库的 scss 和 js 目录中搜索了 form-control。我只看到更新日志中出现的事件和 scss/css 中的 class 定义。

我 可以 只在 afQuickfield 定义中包含 class="form-control"，但这是一个猴子补丁，我不喜欢偷工减料。

任何人都可以帮助我了解如何在 autoForm 字段中分配 form-control 吗？

这是我的自定义 autocomplete 代码（它是一个 WIP，所以不要评判！）。我只是希望从具有适当 atts 的文本元素开始，这样我就可以从那里构建。

// autocomplete.js
AutoForm.addInputType('autocomplete', {
  template: 'afAutocomplete',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    context.atts.autocomplete = 'off'
    return context
  }
})

// autocomplete.html
<template name="afAutocomplete">
  <input type="text" value="{{this.value}}" {{this.atts}} />
</template>

这里是来自 type="text" 字段的代码用于比较。

// text.js
AutoForm.addInputType('text', {
  template: 'afInputText',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    if (typeof context.atts.maxlength === 'undefined' && typeof context.max === 'number') {
      context.atts.maxlength = context.max
    }
    return context
  }
})

// text.html
<template name="afInputText">
  <input type="text" value="{{this.value}}" {{this.atts}}/>
</template>

如您所见，两者几乎相同，但自动完成版本在实际 HTML 输出中没有 form-control class。

有什么想法吗？

Answer 1

实际上这似乎是 AutoForm 的后续错误，因为在包含 afInputText:

时它应该已经抛出以下错误

There are multiple templates named 'afInputText'. Each template needs a unique name

失踪的form-control怎么办？

这本身是正确的，因为 afAutoComplete 模板中的 input 没有 class 属性。

AutoForm 内置输入类型没有 class 属性，因为它们将是 overridden by the themes.

例如 Bootstrap 4 主题中的 text 输入目前看起来像这样：

<template name="afInputText_bootstrap4">
  <input type="text" value="{{this.value}}" {{attsPlusFormControlClass}}/>
</template>

它本身就是 defined as helper.

那么如何安全的定义模板呢？

因为可能有一天，您将从 Bootstrap 4 移动到 Bootstrap 5，您实际上可以创建上面定义的组件 + 逻辑：

// autocomplete.js
AutoForm.addInputType('autocomplete', {
  template: 'afAutocomplete',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    context.atts.autocomplete = 'off'
    return context
  }
})

// autocomplete.html
<template name="afAutocomplete">
  <input type="text" value="{{this.value}}" {{this.atts}} />
</template>

另外创建一个单独的模板，覆盖样式：

<template name="afAutocomplete_bootstrap4">
    <input type="text" class="form-control" value="{{this.value}}" {{attsPlusFormControlClass}} />
</template>

这里重要的是 afAutocomplete 和 _bootstrap4 的组合，AutoForm 使用它来确定当前模板，只要默认模板设置为 bootstrap4 或当前表格使用 bootstrap4 作为主题。