juto:autoform-telephone-input

v1.0.2Published 5 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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:

image

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.