Phone field

The phone field directive creates a text box for users to enter phone numbers. It wraps up the intl-tel-input jQuery plugin to format and validate international phone numbers. This plugin adds a dropdown for users to select a country and specifies the desired format and dial code. Users can also enter a dial code to select a country. You use the bb-phone-field directive in conjunction with the ng-model directive and bind the phone number value to ng-model.

Dependencies

  • intl-tel-input (8.5.2 or higher) Enhances a text box to format and validate international phone numbers.

Phone field settings

  • bb-phone-field — Specifies a variable that holds settings for the bbPhoneFieldConfig configuration object.

bbPhoneFieldConfig settings

  • countryIso2 — The International Organization for Standardization's two-letter code for the default country. When users select the default country, the ng-model value is formatted in the national phone format without the dial code. When users select another country, the ng-model value is formatted in the international phone format with the dial code.
  • selectedCountry — Data for the country that a user selects in the dropdown
    • name — The country's name
    • iso2 — The country's two-letter ISO code
    • dialCode — The country's dial code

Demo

value:
valid:
countryIso2:
selectedCountry:
name:
io2:
dialCode:

Markup

<div ng-controller="PhoneFieldDemoController as phonefieldCtl">
  <form name="form">
    <div class="row">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="phone-field-input" class="control-label">
            <h4>Phone field directive</h4>
          </label>
            <div>
              <input bb-phone-field="phonefieldCtl.bbPhoneFieldConfig"
                     class="form-control"
                     id="phone-field-input"
                     ng-model="phonefieldCtl.phoneNumber"/>
            </div>
        </div>
      </div>
      <div class="col-sm-4">
        <label for="phone-field-input" class="control-label">
          <h4>ng-model values</h4>
        </label>
        <div>
        value:
        <strong>
          <span ng-bind="phonefieldCtl.phoneNumber"/>
        </strong>
        </div>
        <div>
        valid:
        <strong>
          <span ng-bind="form.$valid"
                ng-class="form.$valid ? 'text-success' : 'text-danger'"/>
        </strong>
        </div>
      </div>
      <div class="col-sm-3">
        <label class="control-label">
          <h4>bbPhoneFieldConfig settings</h4>
        </label>
        <div>
          countryIso2:
          <strong>
            <span ng-bind="phonefieldCtl.bbPhoneFieldConfig.countryIso2"/>
          </strong>
        </div>
        selectedCountry:
        <div style="margin-left: 15px;">
          <div>
            name:
            <strong>
              <span ng-bind="phonefieldCtl.bbPhoneFieldConfig.selectedCountry.name"/>
            </strong>
          </div>
          <div>
            io2:
            <strong>
              <span ng-bind="phonefieldCtl.bbPhoneFieldConfig.selectedCountry.iso2"/>
            </strong>
          </div>
          <div>
            dialCode:
            <strong>
              <span ng-bind="phonefieldCtl.bbPhoneFieldConfig.selectedCountry.dialCode"/>
            </strong>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function PhoneFieldDemoController() {
        var self = this;

        self.bbPhoneFieldConfig = {
            countryIso2: 'us'
        };
    }

    angular.module('stache')
      .controller('PhoneFieldDemoController', PhoneFieldDemoController);
}());