Polímero - Entrada de teléfono dorada

El elemento <gold-phone-input> es un campo de texto simple, especialmente para números de teléfono, diseñado en Material Design.

Sintaxis

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

Este elemento tiene una etiqueta opcional, que es un "número de teléfono" de forma predeterminada, como se muestra a continuación:

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

Validación

La validación de un número de teléfono se realiza según el patrón XXX-XXXXXXX, dónde "X"es un dígito y "-" es un separador. Este número de teléfono de forma predeterminada se considerará un número de teléfono de EE. UU. Para usar diferentes patrones numéricos, use los atributoscountry-code y phone-number-pattern como se muestra en el siguiente código.

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

Para validar manualmente, puede utilizar validate()método que devuelve verdadero si es válido o falso, si no es válido. El uso deauto-validate y required atributos hace que la entrada se valide automáticamente.

Estilismo

Para diseñar este elemento, consulte Polymer.PaperInputContainer para obtener una lista de propiedades personalizadas.

Ejemplo

Para usar el elemento gold-phone-input, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando.

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

El comando anterior instala el elemento gold-phone-input en la carpeta bower_components. Luego, importe el archivo gold-phone-input en su index.html usando el siguiente comando.

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

El siguiente programa demuestra el uso del elemento gold-phone-input.

<!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>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page