Polimero - Ingresso telefono oro

L'elemento <gold-phone-input> è un semplice campo di testo, in particolare per i numeri di telefono, con stile in Material Design.

Sintassi

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

Questo elemento ha un'etichetta opzionale, che è un "numero di telefono" per impostazione predefinita, come mostrato di seguito -

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

Validazione

La convalida di un numero di telefono avviene secondo lo schema XXX-XXXXXXX, dove "X"è una cifra e "-" è un separatore. Questo numero di telefono per impostazione predefinita verrà considerato come un numero di telefono degli Stati Uniti. Per utilizzare diversi modelli numerici, utilizza gli attributicountry-code e phone-number-pattern come mostrato nel codice seguente.

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

Per convalidare manualmente, puoi utilizzare validate()metodo che restituisce true se è valido o altrimenti false, se non è valido. L'uso diauto-validate e required attributi fa sì che l'input venga convalidato automaticamente.

Messa in piega

Per modellare questo elemento, vedere Polymer.PaperInputContainer per un elenco di proprietà personalizzate.

Esempio

Per utilizzare l'elemento gold-phone-input, vai alla cartella del tuo progetto nel prompt dei comandi e usa il comando seguente.

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

Il comando precedente installa l'elemento gold-phone-input nella cartella bower_components. Successivamente, importa il file gold-phone-input nel tuo index.html utilizzando il seguente comando.

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

Il seguente programma dimostra l'uso dell'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>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.