Question

当我使用Autoform的afFieldInput时，它总是希望将form-control类添加到定义的任何输入字段afFieldInput中。 form-control将宽度设置为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">

但它总是呈现为：

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

添加form-control完全搞砸了网站的外观。任何的想法？我已经将template=属性指定为空白。

修改

这是我到目前为止所尝试的：

HTML

{{> afFieldInput name="year" options=yearOptions noselect="true" radio="true"}}

JS

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

模式

  year: {
    type: Number,
    optional: true
  },

所以我使用afFieldInput来表示整个广播组，但实际渲染都是错误的。单选按钮本身浮动并与标签文本相交。

这是呈现的内容 - 如您所见，单选按钮的input部分不应嵌套在label标记内。 label代码应位于input代码的单独一行。

<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>

让它渲染整个无线电组的另一个问题是无线电通常无法在视觉上组合在一起：

<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>

顺便说一下，这就是我想要完成的 - 查看表单的属性位置区域。

http://hpp.meteor.com/prices

Answer 1

AutoForm作者在这里。从技术上讲，Hubert OG的回答也是正确的，但真正的问题是你指定了自己的type属性，以便覆盖所有的默认处理。您应移除type属性并移除template属性并移除checked属性。然后使用正确的值添加options属性，保留radio=true，如果您想要默认的选中值，请将该值放在value属性中。

这里要理解的关键概念是，afFieldInput代表广播组，而不是单个单选按钮。

Answer 2

form-control类是默认bootstrap3模板的一部分。要删除它，您需要使用另一个不设置此类的模板。最纯粹的是plain，所以只需将它设置在你的助手中：

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

请注意，将模板值设置为空字符串将不起作用，因为您需要传递有效的模板名称来覆盖默认值。查看this part of the documentation了解内置模板。

Answer 3

我这样做了，收音机恢复正常。但这不应该被认为是一个真正的答案，因为我仍然可能使用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>

如何让Meteor Autoform不将表单控件插入afFieldInput？

3 个答案: