@mstyk/iron-form

Demo and API docs

##<iron-form>

<iron-form> is an HTML <form> element that can validate and submit any custom elements that implement Polymer.IronFormElementBehavior, as well as any native HTML elements. For more information on which attributes are available on the native form element, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

It supports both get and post methods, and uses an iron-ajax element to submit the form data to the action URL.

Example:

<form is="iron-form" id="form" method="post" action="/form/handler">
  <paper-input name="name" label="name"></paper-input>
  <input name="address">
  ...
</form>

By default, a native <button> element will submit this form. However, if you want to submit it from a custom element's click handler, you need to explicitly call the form's submit method.

Example:

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('form').submit();
}

To customize the request sent to the server, you can listen to the iron-form-presubmit event, and modify the form'siron-ajax object. However, If you want to not use iron-ajax at all, you can cancel the event and do your own custom submission:

Example of modifying the request, but still using the build-in form submission:

form.addEventListener('iron-form-presubmit', function() {
  this.request.method = 'put';
  this.request.params = someCustomParams;
});

Example of bypassing the build-in form submission:

form.addEventListener('iron-form-presubmit', function(event) {
  event.preventDefault();
  var firebase = new Firebase(form.getAttribute('action'));
  firebase.set(form.serialize());
});