Polymère - Forme de fer
Le <iron-form> est un élément HTML <form> utilisé pour valider et soumettre des éléments personnalisés et des éléments natifs. Les méthodes get et post sont prises en charge et l'élément ironajax est utilisé pour soumettre les données à l'URL d'action.
Par défaut, l'élément de bouton natif soumet le formulaire suivant -
<form is = "iron-form" id = "form" method = "post" action = "/form/handler">
<paper-input name = "password" label = "Password"></paper-input>
<input name = "address">
...
</form>Appelez explicitement la méthode d'envoi du formulaire si vous souhaitez l'envoyer à partir du gestionnaire de clics de l'élément personnalisé, comme indiqué dans la commande suivante.
<paper-button raised onclick = "submitForm()">Submit</paper-button>
function submitForm() {
document.getElementById('form').submit();
}Le code suivant montre l'événement iron-form-presubmit que vous pouvez écouter si vous souhaitez personnaliser la demande envoyée au serveur.
form.addEventListener('iron-form-presubmit', function() {
this.request.method = 'put';
this.request.params = someCustomParams;
});Exemple
Pour implémenter l'élément Iron-Form, installez les éléments nécessaires et importez-les dans votre fichier index.html.
L'exemple suivant montre l'utilisation d'un élément en forme de fer -
<!DOCTYPE html>
<html>
<head>
<title>iron-form</title>
<base href = "https://polygit.org/polymer+1.5.0/components/">
<script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel = "import" href = "polymer/polymer.html">
<link rel = "import" href = "iron-form/iron-form.html">
<link rel = "import" href = "paper-input/paper-input.html">
<link rel = "import" href = "paper-button/paper-button.html">
<link rel = "import" href = "paper-dropdown-menu/paper-dropdown-menu.html">
<link rel = "import" href = "paper-menu/paper-menu.html">
<link rel = "import" href = "paper-item/paper-item.html">
<style>
.paperbtn {
background: #4682B4;
color: white;
}
.paperinput{
width: 25%;
}
.menu{
width:25%;
}
</style>
</head>
<body>
<form is = "iron-form" method = "get" action = "/" id = "basic">
<paper-input class = "paperinput" name = "name" label = "Enter your name" required<
</paper-input>
<br>
<input type = "checkbox" name = "vehicle" value = "bike"> I have a bike
<br>
<input type = "checkbox" name = "vehicle" value = "car"> I have a car
<br>
<paper-dropdown-menu class = "menu" label = "Icecream Flavours" name = "Flavours">
<paper-menu class = "dropdown-content">
<paper-item value = "vanilla">Vanilla</paper-item>
<paper-item value = "strawberry">Strawberry</paper-item>
<paper-item value = "caramel">Caramel</paper-item>
</paper-menu>
</paper-dropdown-menu><br>
<paper-button class = "paperbtn" raised onclick = "_submit(event)">Submit</paper-button>
<paper-button class = "paperbtn" raised onclick = "_reset(event)">Reset</paper-button>
<h4>You entered the details:</h4>
<div class = "output"></div>
</form>
<script>
function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
function _reset(event) {
var form = Polymer.dom(event).localTarget.parentElement
form.reset();
form.querySelector('.output').innerHTML = '';
}
basic.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});
</script>
</body>
</html>Production
Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.
polymer serveOuvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.
