Question

我有一个选择框询问用户“您是如何得知我们的？”

选项包括Google，Yelp和其他（请注明）。

当选择“其他”选项时，如何让Autoform显示空白文本输入框，以及使用Autoform验证该textinput字段的内容？

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)']
}

如果选择了Other选项，我希望能够存储用户直接在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 - 钩子处理来自meteor方法发送电子邮件的错误或成功回调 - 它需要使用autoform生成的表单的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显示输入框？

1 个答案: