仅当从列表中选择某些内容时，让 Meteor Autoform 显示输入框？

Question

我有一个 select 框询问用户 "How did you hear about us?"

选项有Google、Yelp和其他（请注明）。

当 "Other" 选项被 select 编辑时，如何让 Autoform 显示空白文本输入框，并使用 Autoform 验证该文本输入字段的内容？

common.js:

Schema = {};
Schema.contact = new SimpleSchema({
    name: {
        type: String,
        label: "Your Name",
        max: 50
    },
    email: {
        type: String,
        regEx: SimpleSchema.RegEx.Email,
        label: "E-mail Address"
    },
    subject: {
        type: String,
        label: "Subject",
        max: 1000
    },
    message: {
        type: String,
        label: "Message",
        max: 1000
    },
    referral: {
        type: String,
        allowedValues: ['Google', 'Yelp', 'Other (Please Specify)']
    }
});

contact.js:

Template.Contact.helpers({
  contactFormSchema: function() {
    return Schema.contact;
  }
});

contact.html:

  {{#autoForm schema=contactFormSchema id="contactForm" type="method" meteormethod="sendEmail"}}
  <fieldset>
    <legend>Contact Us</legend>
    {{> afQuickField name="name"}}
    {{> afQuickField name="email"}}
    {{> afQuickField name="subject"}}
    {{> afQuickField name="message" rows=10}}
    {{> afQuickField name="referral" options="allowed"}}
    <div>
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
  </fieldset>
  {{/autoForm}}

此外，在架构的一部分中说：

referral: {
    type: String,
    allowedValues: ['Google', 'Yelp', 'Other (Please Specify)']
}

如果其他选项是 selected，我希望能够存储用户直接在 referral 下输入的字符串值，而不必为此创建单独的命名条目输入。

有什么想法吗？

显然，我更愿意在 "Autoform Way" 中执行此操作，而不是与 jQuery 或事件监听器之类的东西一起破解。

Answer 1

我想通了。绝对比我想象的要复杂得多。

common.js

Schema = {};
Schema.contact = new SimpleSchema({
    name: {
        type: String,
        label: "Your Name",
        max: 50
    },
    email: {
        type: String,
        regEx: SimpleSchema.RegEx.Email,
        label: "E-mail Address"
    },
    subject: {
        type: String,
        label: "Subject",
        max: 1000
    },
    message: {
        type: String,
        label: "Message",
        max: 1000
    },
    referral: {
        type: String,
        allowedValues: ['Google', 'Yelp', 'Other (Please Specify)']
    },
    specificReferral: {
        type: String,
        label: 'Other',
        max: 1000,
        optional: true,
        custom: function(){
          // console.log(this.field('referral').value);
          var customCondition = this.field('referral').value === 'Other (Please Specify)';
          // console.log("this field value: ", this.field('referral').value);
          // console.log("custom condition: ", customCondition);
          if (customCondition && !this.isSet && (!this.operator || (this.value === null || this.value === ""))) {
            return "required";
          }
        }
    }
});

contact.html - 关键是使用 if 块

          {{#autoForm schema=contactFormSchema id="contactForm" type="method" meteormethod="sendContactEmail"}}
          <fieldset>
            {{> afQuickField name="name"}}
            {{> afQuickField name="email"}}
            {{> afQuickField name="subject"}}
            {{> afQuickField name="message" rows=10}}
            {{> afQuickField name="referral" options="allowed"}}
                {{#if afFieldValueIs name="referral" value="Other (Please Specify)"}}
                    {{> afQuickField name="specificReferral"}}
                {{/if}}
            <div>
              <button type="submit" class="btn btn-primary">Submit</button>
              <button type="reset" class="btn btn-default">Reset</button>
            </div>
          </fieldset>
          {{/autoForm}}

methods.js - check(contents, Schema.contact); 是必需的。

sendContactEmail: function(contents){

    check(contents, Schema.contact);

    // console.log(contents);

    if (!contents.specificReferral){
        contents.specificReferral = '';
    };

    contents.message = contents.message.replace(/\r?\n/g, '<br />');

    return Meteor.Mandrill.send({
      to: 'admin@acupuncturecleveland.com',
      from: contents.email,
      subject: contents.subject,
      html: 'A new message has been sent by ' + contents.name + ' and they found us through: ' + contents.referral + ' ' + contents.specificReferral + '<br /><br />' + contents.message
    });

}

contact.js - 挂钩处理发送电子邮件的流星方法的错误或成功回调 - 它需要您使用自动表单生成的表单的 ID

Template.Contact.helpers({
  contactFormSchema: function() {
    return Schema.contact;
  }
});

Template.Contact.rendered = function(){
    AutoForm.hooks({
      contactForm: {
        onSuccess: function(operation, result, template) {
            // console.log('operation: ', operation);
            // console.log('result: ', result);
            // console.log('template: ', template);
          alert('Thank you for your inquiry! We will get back to you shortly.');
        },
        onError: function(operation, error, template) {
            alert('There was an error with your submission. Please try again.');
        }
      }
    });
};

仅当从列表中选择某些内容时，让 Meteor Autoform 显示输入框？

Getting Meteor Autoform to display input box only when something selected from a list?

meteor

meteor-autoform