当使用autoForm，引导4时，“窗体控件”类在哪里设置？

Question

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

我在meteor-autoform的整个代码库以及bootstrap库的scss和js目录中对meteor-autoform表示祝贺。我只看到scss/css中的changelog和类定义中出现的情况。

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

有人能帮助我理解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中，autocomplete版本没有form-control类。

有什么想法吗？

Answer 1

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

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

失踪的form-control怎么办？

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

AutoForm内置输入类型没有类属性，因为它们将是被主题覆盖。

例如，引导4主题中的text输入当前如下所示：

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

它本身就是定义为助手。

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

由于有一天，您将从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作为主题。