Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

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 (12.4.0) 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);
}());