如何使Meteor Autoform不将表单控件插入到输入中?

如何使Meteor Autoform不将表单控件插入到输入中?,meteor,Meteor,当我使用Autoform的afFieldInput时,它总是希望将表单控件类添加到定义的任何输入字段afFieldInput表单控件将宽度设置为100%,这不是单选按钮所需的宽度 这是我的架构的一部分: propertyInfo: { type: Object }, "propertyInfo.area" : { type: String, optional: false, label: "Location of Property *" }, 这

当我使用Autoform的
afFieldInput
时,它总是希望将
表单控件
类添加到定义的任何输入字段
afFieldInput
<代码>表单控件将宽度设置为100%,这不是单选按钮所需的宽度

这是我的架构的一部分:

  propertyInfo: {
    type: Object
  },
  "propertyInfo.area" : {
    type: String,
    optional: false,
    label: "Location of Property *"
  },
这是我的单选按钮:

{{> afFieldInput class="track-initial-info-change" type="radio" template="" name="propertyInfo.area" value="area1" checked="checked"}}
我希望它呈现如下:

<input class="track-initial-info-change" type="radio" name="propertyInfo.area" value="area1" checked="checked">
js

UI.registerHelper("yearOptions", function() {
    return [
        {label: "2013", value: 2013},
        {label: "2014", value: 2014},
        {label: "2015", value: 2015}
    ];
});
模式

  year: {
    type: Number,
    optional: true
  },
因此,我使用了
afFieldInput
来表示整个无线电组,但实际的渲染完全错误。单选按钮本身浮动并与标签文本相交

这就是呈现的内容-正如您所看到的,单选按钮的
输入部分不应嵌套在
标签
标记中。
标签
标签应位于
输入
标签的单独一行

<div class="radio">
      <label>
        <input type="radio" value="2013" name="year" data-schema-key="year">
        2013
      </label>
</div>
<div class="radio">
      <label>
        <input type="radio" value="2014" name="year" data-schema-key="year">
        2014
      </label>
</div>
<div class="radio">
      <label>
        <input type="radio" value="2015" name="year" data-schema-key="year">
        2015
      </label>
</div>

2013
2014
2015
让它渲染整个无线电组的另一个问题是,无线电通常无法直观地组合在一起:

<div class="radio">
      <label>
        <input type="radio" value="2013" name="year" data-schema-key="year">
        2013
      </label>
</div>
<div class="radio">
      <label>
        <input type="radio" value="2014" name="year" data-schema-key="year">
        2014
      </label>
</div>
<!-- Insert code here for creating a bootstrap accordion that drops 
down with a text box input when only the 2014 radio button is checked. 
It could be asking for something that only applies to year 2014 
specifically. How could you do this if afFieldInput only represents 
an entire radio group and not an individual radio button? -->
<div class="radio">
      <label>
        <input type="radio" value="2015" name="year" data-schema-key="year">
        2015
      </label>
</div>

2013
2014
2015
顺便说一句,这就是我想要完成的-查看表单中属性的位置


表单控件
类是默认
bootstrap3
模板的一部分。要删除它,您需要使用不同的模板,一个不设置此类的模板。最纯粹的是
plain
,因此只需在助手中设置它:

{{> afFieldInput template='plain' ... }}

注意,将模板值设置为空白字符串将不起作用,因为需要传递一个有效的模板名来重写默认值。查看内置模板。

我这样做了,收音机恢复正常。但这不应该被认为是一个实际的答案,因为我仍然可能错误地使用Autoform

        <div class="form-inline">
          {{> afFieldInput class="track-initial-info-change" type="radio" radio="true" template="" name="propertyInfo.area" value="area1" checked="checked"}}
          <label class="label-to-bold-if-checked">
            Campbell, Cupertino, East Palo Alto, Fremont, Los Altos, Los Gatos, Menlo Park, Milpitas, Mountain View, Newark, Palo Alto, San Jose, Santa Clara, Saratoga, Sunnyvale, Union City
          </label>
        </div> 

{{>afFieldInput class=“跟踪初始信息更改”type=“radio”radio=“true”template=”“name=“propertyInfo.area”value=“area1”checked=“checked”}
坎贝尔、库比蒂诺、东帕洛阿尔托、弗里蒙特、洛斯阿尔托、洛斯加托斯、门洛公园、米尔皮塔斯、山景、纽瓦克、帕洛阿尔托、圣何塞、圣克拉拉、萨拉托加、桑尼维尔、联合城

此处自动生成作者。从技术上讲,Hubert OG的答案也是正确的,但真正的问题是您正在指定自己的
type
属性,以便覆盖所有默认处理。您应该删除
类型
属性,删除
模板
属性,删除
选中的
属性。然后添加一个具有适当值的
options
属性,保持
radio=true
,如果需要默认选中值,则将该值放入
value
属性中


这里要理解的关键概念是,您的
afFieldInput
表示单选组,而不是一个单选按钮。

我可能错了,但请尝试
{>afFieldInput class=“track initial info change”radio=“true”name=“propertyInfo.area”value=“area1”checked=“checked”}
根据我使用文档得出的结果,类型由布尔模式设置。在bootstrap-3的模板中,如果类型不是radio/checkbox等,它将添加类。该更改将强制它使用adRadio元素,该元素不会触发要添加的表单控件类。感谢您的尝试<代码>{>afFieldInput class=“track initial info change”type=“radio”radio=“true”template=”“name=“propertyInfo.area”value=“area1”checked=“checked”}
呈现到
中,这很不幸。你有你的表单的完整源代码和你使用的任何模式吗。Hubert OG说得对,template=“plain”可以工作,但是看看你不需要的代码。谢谢Hubert。通常情况下,我不会对此有任何问题,但阅读Autoform的更改日志:
0.2.2-单选按钮和复选框上不包含表单控件类
Autoform当前处于0.14.0,所以我有一种感觉,这是应该已经解决的问题,而不必为每个单选按钮将模板更改为plain。基本上,我用Autoform是错误的。太棒了-谢谢!嗯。。。六羟甲基三聚氰胺六甲醚。。。表示整个组的问题是,无论有多少单选按钮选项,单选组的
name=
属性都是相同的。每个单选按钮都有一个单独的标签和值。假设你有10个单选按钮和10个不同的标签,这些单选按钮有10个不同的值。但是它们都共享相同的
name
属性,并且在SimpleSchema中只有一个条目。我想我感到困惑的是,如果你只需要一个
afFieldInput
helper.oh,oh,oh,那么你将如何指定每个标签和值。我刚刚重新阅读了文档,似乎你在回复这篇文章的同时添加了更多关于如何指定选项的示例,哈哈。好的,太棒了,我会尝试一下并发布我的结果!我还是不明白。文档中的示例都指向您的基本选择下拉列表,但没有单选按钮的示例。单选按钮有两部分-圆形按钮和标签,它们需要单独定义。让
afFieldInput
来表示和渲染整个无线电组是没有意义的。请在更新的OP中查看我的示例。默认模板是“bootstrap3”,如果您使用的是bootstrap3,它看起来会很好。如果没有,或者需要不同的渲染,则很可能需要自定义模板。您可以尝试先添加
template=“plain”
属性和您自己的类,但如果这不能满足您的需要,则需要创建您自己的模板。关于不可阻挡的要点
{{> afFieldInput template='plain' ... }}
        <div class="form-inline">
          {{> afFieldInput class="track-initial-info-change" type="radio" radio="true" template="" name="propertyInfo.area" value="area1" checked="checked"}}
          <label class="label-to-bold-if-checked">
            Campbell, Cupertino, East Palo Alto, Fremont, Los Altos, Los Gatos, Menlo Park, Milpitas, Mountain View, Newark, Palo Alto, San Jose, Santa Clara, Saratoga, Sunnyvale, Union City
          </label>
        </div>