Javascript '；表单控件'；使用autoForm、Bootstrap 4时设置类？

我正在为Meteor项目中的

afQuickfield

设计一个自定义的

autocomplete

类型。我遇到的问题是，当我在

afQuickfield

上设置

type=“autocomplete”

时，

class=“form control”

属性丢失。对于所有其他字段类型，它都包括在内

我在

meteor autoform

的整个代码库以及

bootstrap

库的

scss

和

js

目录中搜索了

form control

。我只在变更日志和scss/css中的类定义中看到发生的情况

我可以将

class=“form control”

包含在

afQuickfield

定义中，但这是一个猴子补丁，我不喜欢走捷径

有人能帮我理解如何在

自动表单

字段中分配

表单控件

吗

这是我的自定义

autocomplete

code（这是一个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>

正如您所看到的，这两个控件实际上是相同的，但是自动完成版本在实际的HTML输出中没有

表单控件

类

---

有什么想法吗？

实际上这似乎是来自

AutoForm

的后续错误，因为在包含

afInputText

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

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

缺少的

表单控件如何处理？
这本身是正确的，因为
afAutoComplete
模板中的
input
上没有
class
属性

AutoForm内置输入类型没有类属性，因为它们将是

例如，Bootstrap 4主题中的
文本
输入当前如下所示：



这本身就是

那么，如何安全地定义模板呢？
由于可能有一天，您将从引导程序4移动到引导程序5，因此您可以实际创建上面定义的组件+逻辑：

//autocomplete.js
AutoForm.addInputType（'autocomplete'{
模板：“afAutocomplete”，
valueOut：函数（）{
返回这个.val（）
},
值转换器：{
stringArray:AutoForm.valueConverters.stringToStringArray，
编号：AutoForm.valueConverters.stringtonNumber，
numberArray:AutoForm.valueConverters.stringToNumberArray，
布尔值：AutoForm.valueConverters.stringToBoolean，
booleanArray:AutoForm.valueConverters.stringToBooleanArray，
日期：AutoForm.valueConverters.stringToDate，
dateArray:AutoForm.valueConverters.stringToDateArray
},
contextAdjust:函数（上下文）{
context.atts.autocomplete='off'
返回上下文
}
})

//autocomplete.html

并另外创建一个替代样式的单独模板：



这里很重要的是
afAutocomplete
和
\u bootstrap4
的组合，AutoForm使用它来确定当前模板，只要默认模板设置为
bootstrap4
，或者当前表单使用
bootstrap4
作为主题。
我应该在
meteor自动表单主题中定义
\u bootstrap4
模板吗？我可以分叉它并将其包含在我的根
/packages
目录中？meteor autoform
将包含一个在bootstrap 4、5和更高版本中设计的自动完成功能的可能性有多大？想法？集成的过程将很简单，因为我目前负责管理官方的自动表单和主题。让我们在Autoform回购协议的新版本中讨论这一点。我认为其他Autoform用户可能也对这一点感兴趣。将对话移到另一个位置很好地注意到，在
meteor Autoform主题/bootstrap4/
中添加
\u bootstrap4
模板也需要使用新模板
导入路径更新
index.js
文件。
// 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>