将自定义输入字段添加到 Meteor 中的自动表单

Adding a custom input field to an AutoForm in Meteor

本文关键字：表单 Meteor 自定义 输入 字段 添加      更新时间：2023-09-26
  {{#autoForm schema="schema" id="submitoffer" type="method" meteormethod="submitoffer"}}
      {{> afQuickField name="startLocation"}}
      <input id="date" type="text" class="form-control datepicker">
      <input id="departureTime" type="text"  class="form-control timepicker">
      <input id="returnTime" type="text"  class="form-control timepicker">
      {{> afQuickField name="seats" type="number"}}
      <button type="submit" class="btn btn-primary">Offer lift</button>
  {{/autoForm}}

我希望能够使用日期、出发时间和返回时间输入(这是 pickadate 的实现.js。但是，当我将表单提交到服务器时，这些输入不会作为表单的一部分进行拾取。我如何要求输入它们以及将它们与自动表单一起提交？

您可以使用

afFieldInput元素并在架构中设置 class 属性。

例如：

<body>
    {{#autoForm collection="Offers" id="submitoffer" type="insert"}}
        {{> afQuickField name="startLocation"}}
        {{> afFieldInput name="date"}}
        {{> afFieldInput name="departureTime"}}
        {{> afFieldInput name="returnTime"}}
        {{> afQuickField name="seats"}}
        <button type="submit" class="btn btn-primary">Offer lift</button>
    {{/autoForm}}
</body>

if (Meteor.isClient) {
    Template.body.onRendered(function () {
        $('.datepicker').pickadate();
        $('.timepicker').pickatime();
    });
}
Offers = new Mongo.Collection("offers");
Offers.attachSchema(new SimpleSchema({
    date: {
        type: String,
        label: "Date",
        autoform: {
            afFieldInput: {
                class: "datepicker"
            }
        }
    },
    departureTime: {
        type: String,
        label: "Departure Time",
        autoform: {
            afFieldInput: {
                class: "timepicker"
            }
        }
    },
    returnTime: {
        type: String,
        label: "Return Time",
        autoform: {
            afFieldInput: {
                class: "timepicker"
            }
        }
    },
    seats: {
        type: Number,
        label: "Seats"
    },
    startLocation: {
        type: String,
        label: "Start Location"
    }
}));

请注意：上面给出的示例使用字符串类型作为字段 date 。我强烈建议将date值存储为 JavaScript Date 对象。您可能希望使用 before 挂钩将字符串转换为 Date 对象。

相关文章：