ember-simple-form v2.2.0
Ember-simple-form
Ember Simple Form is a basic component for decoupling your form data from it's original source.
TLDR; Ember Simple Form takes care of a lot of edge cases around capturing form values.
It uses Ember's copy
method (or .toJSON
on Ember Data models) to create an immutable copy of a set of startingValues
.
For capturing user submit
actions, the form copies the current values within the form and then sends an onsubmit
action which can be listened for.
Installation
npm install ember-simple-form
Use
To create a form without starting values:
{{#simple-form as |formValues|}}
{{input value=formValues.username placeholder="Username"}}
{{input type="password" value=formValues.username placeholder="Password"}}
<button>Submit</button>
{{/simple-form}}
To listen to the submit event and get all values from the form and call the login
action:
{{#simple-form onsubmit=(action "login") as |formValues|}}
{{input value=formValues.username placeholder="Username"}}
{{input type="password" value=formValues.username placeholder="Password"}}
<button>Submit</button>
{{/simple-form}}
Let's set the form to start with a default username of "admin".
Initial values can be set using the startingValues
attribute:
{{#simple-form startingValues=(hash username="admin") onsubmit=(action "login") as |formValues|}}
{{input value=formValues.username placeholder="Username"}}
{{input type="password" value=formValues.username placeholder="Password"}}
<button>Submit</button>
{{/simple-form}}
Reseting the Form Values
There may be times where the form needs to be reset.
For this, as a second variable, simple-form
yields a function to reset the form.
This could be used to add a reset button to the form above:
{{#simple-form startingValues=(hash username="admin") onsubmit=(action "login") as |formValues resetForm|}}
{{input value=formValues.username placeholder="Username"}}
{{input type="password" value=formValues.username placeholder="Password"}}
<button {{action resetForm}}>Reset</button>
<button>Submit</button>
{{/simple-form}}
The onsubmit
action will also send the resetForm
function so that the form can be reset after handling submission.
For instance, the controller for the above could be:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
login(formValues, resetForm) {
fetch('/login', {
method: 'POST',
data: JSON.stringify(formValues)
}).then((res) => res.json())
.then(() => {
resetForm();
});
},
},
});
Contributing
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.