tangy-form

<tangy-form>

A form element for lazy loaded multipage forms.

• Conforms to Material Design guidelines
• Loads of handy input elements such as <tangy-gps>.
• Easy to write logic for the form for hiding / showing and disabling / enabled inputs.

<tangy-form id="my-form">
  <tangy-form-item id="item1">
    <tangy-input name="input1" label="What is your first name?"></tangy-input>
  </tangy-form-item>
  <tangy-form-item id="item2">
    <tangy-input name="input2" label="What is your last name?"></tangy-input>
  </tangy-form-item>
</tangy-form>

<script>
  document.querySelector('#my-form').addEventListener('submit', event => {
    // By default, the form response is locked and the user can browse it. Use event.preventDefault() 
    // to do something else.
    event.preventDefault()
    // 3 ways to inspect the user's response to the form. Ordered by level of detail.
    console.log(event.target.response)
    console.log(event.target.inputs)
    console.log(event.target.values)
  })
</script>

Install in your project

<tangy-form> is a Custom Element built with Polymer and can be used in frameworks such as Angular, React, and Vue. Check compatibility with your project's framework on Custom Elements Everywhere. If you are ready to go, run npm install --save tangy-form to add it to your project. Depending on your build system/framework, there may be different steps to take to get Web Components loading.

• Web Components in React
• Using Web Components in Angular

Note that if you are using this element inside of another Polymer Element, you'll need to add the preserve-content attribute to your tangy-form-item's template tags because of this this issue.

Run the demo

Requires node.js and npm installed.

git clone https://github.com/tangerine-community/tangy-form
cd tangy-form
npm install
npm install -g polymer-cli
polymer serve

Then open http://localhost:8080

Tests

To run tests, use polymer test command or just npm run test to just run tests in Chrome. If you want to develop tests, open http://localhost:8080/test/tangy-form_test.html