使用 autoForm、Bootstrap 4 时，“form-control”类在哪里设置？

Question

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

我在meteor-autoform 的整个代码库以及bootstrap 库的scss 和js 目录中查找了form-control。我只在 scss/css 中的更改日志和类定义中看到出现。

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

谁能帮我理解form-control 是如何在autoForm 字段中分配的？

这是我的自定义 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 类。

有什么想法吗？

Answer 1

实际上这似乎是来自AutoForm 的后续错误，因为在包含afInputText 时应该已经抛出以下错误：

有多个名为“afInputText”的模板。每个模板都需要一个唯一的名称

那丢失的form-control呢？

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

AutoForm 内置输入类型没有类属性，因为它们将是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作为主题.