SimpleSchema 和 AutoForm:将密码字段呈现为单个输入

SimpleSchema and AutoForm: Render password field as single input

我在一个项目中工作,"super admin" 用户可以创建另一个用户,为他们设置用户名和密码。我有一个 AutoForm quickForm 根据附加到 Meteor.users 集合(使用 Collection2)的 SimpleSchema 渲染表单。 根据 Collection2 docs 关于将架构附加到用户集合的建议,我的架构如下所示:

Usuarios.schema = new SimpleSchema({
    ...
    username: {
        type: String,
    },
    services: {
        type: Object,
        optional: true,
        blackbox: true
    },
   "services.password": {
      type: String,
      optional: true,
      autoform: {
         type: 'password'
      }
    },
    ...
});

呈现的表单如下所示:

但我想让密码字段像用户名一样呈现(没有服务面板)。 我还没有找到解决方法。我需要在架构中包含服务对象类型属性,否则用户插入时验证失败(使用 Accounts.createUser()),因此呈现面板(由于属性的对象类型)。

关于如何实现所需模板渲染的任何想法?

您的密码是 'service' 对象的一部分,这就是为什么在使用 quickForm 或 quickFields 时它会自动呈现在 afObjectField 中:

afObjectField

When you use the afQuickField component for a field that is an Object, it is rendered using the afObjectField component unless you override the type or specify options. This happens by default when you use a quickForm for a schema that has a field of type Object.

The afObjectField component renders all of an object field's subfields together as one group. The group is labeled with the name of the object field. The actual visual representation of the group will vary based on which theme template you use. For the "bootstrap3" default template, the group appears in a panel with a heading.

解决方案 A:手动表单渲染

要将密码呈现为单个字段,您需要手动设置自动表单并使用 afFieldInput 引用这些字段。 mthen 的形式可能看起来像(未经测试但代码应该像):

{{> autoForm id="login" schema=Usuarios.schema}}
    {{> afFieldInput type="text" name="username"}}
    {{> afFieldInput type="password" name="services.password"}}
{{/autoForm}}

它的优点是您的表单看起来完全如您所愿,但缺点是您必须手动添加所有额外内容(验证消息和内容)。

解决方案 B:更改架构

当您从服务组中提取密码时,您将获得与用户名相同的自动呈现效果:单个输入字段。

Usuarios.schema = new SimpleSchema({
    ...
    username: {
        type: String,
    },
    services: {
        type: Object,
        optional: true,
        blackbox: true
    },
    ...
   password: {
      type: String,
      optional: true,
      autoform: {
         type: 'password'
      }
    },
    ...
});