Polymer - Gold Phone Input

Quiz

<gold-phone-input>element is a simple text field, especially for phone numbers, styled in Material Design.

Syntax

<gold-phone-input></gold-phone-input>

This element has an optional label, which is a "phone number" by default as shown below −

<gold-phone-input label = "Your phone number"></gold-phone-input>

Validation

The validation of a phone number takes place according to the pattern XXX-XXXXXXX, where "X" is a digit and "-" is a separator. This phone number by default will be considered as a US phone number. To use different number patterns, use the attributes country-code and phone-number-pattern as shown in the following code.

<gold-phone-input 
   country-code = "354"
   phone-number-pattern = "XX-XX-XX-XX-X">
</gold-phone-input>

To validate manually, you can use validate() method that returns true if it is valid or otherwise false, if it is not valid. The use of auto-validate and required attributes causes the input to be automatically validated.

Styling

To style this element, see Polymer.PaperInputContainer for a list of custom properties.

Example

To use the gold-phone-input element, navigate to your project folder in the command prompt and use the following command.

bower install PolymerElements/gold-phone-input --save

The above command installs the gold-phone-input element in bower_components folder. Next, import the gold-phone-input file in your index.html using the following command.

<link rel = "import" href = "/bower_components/gold-phone-input/gold-phone-input.html">

The following program demonstrates the use of gold-phone-input element.

<!DOCTYPE html>
<html>
   <head>
      <title>Gold Phone Input</title>
      <meta charset = "utf-8">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/gold-phone-input/gold-phone-input.html">
   </head>

   <body>
      <h3>Pre-validated Us number</h3>
      <gold-phone-input
         label = "Valid"
         value = "358-101-5422"
         auto-validate  
         style = "width:35%; display:inline-block;">
      </gold-phone-input><br/>
	
      <gold-phone-input
         label = "Invalid"
         value = "358-101-542"
         auto-validate   
         style = "width:35%; display:inline-block;">
      </gold-phone-input>	<br/>
	
      <h3>Displayes error message<h3>
      <gold-phone-input 
         label = "Enter the phone number" 
         auto-validate 
         error-message = "Please enter the valid US number" 
         style = "width:35%; display:inline-block;">
      </gold-phone-input>	
   </body>
</html>

Output

To run the application, navigate to your project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm

Print Page