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.
npm install ember-simple-form
To create a form without starting values:
To listen to the submit event and get all values from the form and call the login
action:
Let's set the form to start with a default username of "admin".
Initial values can be set using the startingValues
attribute:
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:
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();
});
},
},
});
ember server
- Visit your app at http://localhost:4200.
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.