Polymère - Entrée téléphone or

L'élément <gold-phone-input> est un champ de texte simple, en particulier pour les numéros de téléphone, stylé dans Material Design.

Syntaxe

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

Cet élément a une étiquette facultative, qui est un "numéro de téléphone" par défaut, comme indiqué ci-dessous -

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

Validation

La validation d'un numéro de téléphone se fait selon le modèle XXX-XXXXXXX, où "X"est un chiffre et "-" est un séparateur. Ce numéro de téléphone par défaut sera considéré comme un numéro de téléphone américain. Pour utiliser différents modèles de nombres, utilisez les attributscountry-code et phone-number-pattern comme indiqué dans le code suivant.

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

Pour valider manuellement, vous pouvez utiliser validate()méthode qui renvoie true si elle est valide ou sinon false, si elle n'est pas valide. L'utilisation deauto-validate et required attributs provoque la validation automatique de l'entrée.

Coiffant

Pour styliser cet élément, voir Polymer.PaperInputContainer pour une liste de propriétés personnalisées.

Exemple

Pour utiliser l'élément gold-phone-input, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.

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

La commande ci-dessus installe l'élément gold-phone-input dans le dossier bower_components. Ensuite, importez le fichier gold-phone-input dans votre index.html à l'aide de la commande suivante.

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

Le programme suivant montre l'utilisation de l'élément 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.