The Data Down, Actions Up form builder with ember-changeset and validations
npm install flood-simple-form
The DDAU (Data Down, Actions Up) form builder we use at Flood IO. It's based on a lot of great work by others in the Ember community, but we felt we needed something more flexible and slightly less opinionated about how data is persisted.
The basic principle behind this is to borrow a similar syntax to Simple Form from the Rails world, and apply an intermediate change layer using ember-changeset.
The inputs themselves are all DD,AU. When a change occurs it fires an action which propagates that change up to the form component, where the value is assigned to the changeset, which also fires the validations so you get realtime feedback as fields change.
When the form is submitted, you can choose how you persist the changeset, but typically you would just call changeset.save().
flood-simple-form is implemented with certain life cycle behaviours, designed to provide a consistent user experience.
To start, create a form and supply a changeset as the first argument. The underlying model can be an Ember.Object, DS.Model or POJO, and on submit all changes will be applied to this
object if the changeset is valid.
_Assuming user has an email property:_
``hbs`
{{#simple-form (changeset user (action "validate") as |f|}}
{{f.input "email" placeholder="user@example.com" label="Email Address"}}
{{/simple-form}}
flood-simple-form supports errors from ember-changeset, so you can easily propagate errors from the server and client side validations.
If the action handling on-submit returns a promise, the form will disable all inputs while the promise resolves, re-enabling everything regardless of the outcome of the promise. This is useful to ensure a form is only submitted once, and ensuring consistency while changes are persisted.
`js`
export default Ember.Controller.extend({
actions: {
saveChanges(changeset) {
return changeset.save();
}
}
});
ember install flood-simple-form
Requires Ember 2.4+.
`hbs
{{#simple-form
(changeset user (action "validate"))
on-submit=(action "createUser") as |f|}}
{{f.input "email" placeholder="user@example.com" label="Email Address"}}
{{f.input "fullName" placeholder="John Smith" label="Full Name"}}
{{f.input "country" label="Country" as="collection" collection=countries labelPath="name" valuePath="isoCode"}}
{{f.submit "Create User"}}
{{/simple-form}}
`
`jstrue
export default Controller.extend({
actions: {
validate({key, newValue}) {
// Validation logic, must return or an error message.`
},
createUser(changeset) {
return changeset.save().catch(() => {
get(this, 'model.errors').forEach(({ attribute, message }) => {
changeset.addError(attribute, { validation: message });
});
})
}
}
});
This is the main