juto:autoform-telephone-input

Plugin for aldeed:autoform to add international telephone numbers via the NPM intl-tel-input library.

Turns this:

1
2  phone: {
3    type: SimpleSchema.RegEx.Phone,
4    label: "Phone",
5    autoform: {
6      afFieldInput: {
7        type: "intl-tel"
8      }
9    }
10  }
11

Into this:

Installation

1. Install the intl-tel-input library.

   meteor npm install intl-tel-input@15.0.2 --save

2. Install this library.

   meteor add juto:autoform-telephone-input

3. (optional but recommended) Configure Simple-Schema validation.

   In your schema JS (on the client):

   1import SimpleSchema from 'simpl-schema';
   2import {Meteor} from 'meteor/meteor';
   3import {Tracker} from 'meteor/tracker';
   4let intlTelInput;
   5
   6if (Meteor.isClient) {
   7  intlTelInput = require('intl-tel-input');
   8}
   9
   10let schema = {
   11  // ...
   12  phone: {
   13    type: SimpleSchema.RegEx.Phone,
   14    label: "Company Contact Phone",
   15    autoform: {
   16      afFieldInput: {
   17        type: "intl-tel",
   18        autocomplete: "tel"
   19      }
   20    },
   21    custom: function() {
   22      if (Meteor.isClient && this.isSet && window.intlTelInputUtils) {
   23        const valid = window.intlTelInputUtils.isValidNumber(this.value);
   24        if (!valid) {
   25          return SimpleSchema.ErrorTypes.VALUE_NOT_ALLOWED;
   26        }
   27      } 
   28    }
   29  }
   30  // ...
   31};
   32
   33window.MySchema = new SimpleSchema(schema, {tracker: Tracker});

Options

You can pass custom options through to the intl-tel-input package via the intlTelInputOptions property in the schema e.g. :

  phone: {
    type: SimpleSchema.RegEx.Phone,
    label: "Company Contact Phone",
    autoform: {
      afFieldInput: {
        type: "intl-tel",
        autocomplete: "tel",
        intlTelInputOptions: {
          preferredCountries: ["us","au","gb"],
          utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.2/js/utils.js"
        }
      }
    },
    custom: function() {
      if (Meteor.isClient && this.isSet && window.intlTelInputUtils) {
        const valid = window.intlTelInputUtils.isValidNumber(this.value);
        if (!valid) {
          return SimpleSchema.ErrorTypes.VALUE_NOT_ALLOWED;
        }
      } 
    }
  }

The default options are as above.