Present Ember-Data model errors in Bootstrap3 alerts and help-blocks.
MIT License
This addon helps present your Ember-Data model errors in a consistent fashion using Bootstrap3 alerts and help-blocks.
twbs-errors-alert
& twbs-form-group
components depend on Ember Data'sember install ember-data-bootstrap3-forms
As mentioned, you should install Bootstrap3 in order for the correct styling to be applied. Refer to the requirements section above.
The demonstration web application can be found here: http://ember-data-bootstrap3-forms.cybertooth.io/.
This addon supplies the following components:
{{twbs-errors-alert}}
- a component that listens to a single model's errors{{twbs-form}}
- a component that creates a form element that you can easily bind{{twbs-form-group}}
- a component generating a Bootstrap<div class="form-group">...</div>
that has intelligence built in to detect when it's.has-error
class will be applied and error messages will beFurther information about these items can be found in the Usage section below.
As mentioned above there are several examples on the demonstration site: http://ember-data-bootstrap3-forms.cybertooth.io/
{{twbs-form}}
A standard HTML form with the Bootstrap3 .form
class assigned. Provide a block
with all the form-groups and inputs that you want inside the form container. The
twbs-form
component accepts a submit
and reset
property both of which
should take in a closure function.
submit
(OPTIONAL) - the action that will be fired if the form happens toreset
(OPTIONAL) - the action the will be fired when the form is reset byCheck out the demo application
{{twbs-errors-alert}}
A Bootstrap3 alert box that contains a list of model errors. You provide a block to the component, it will be placed in a paragraph element just above the unordered-list of errors. When the model does not have any errors, the alert will not be visible.
model
(REQUIRED) - the supplied model's DS.Errors
collection is the source for the list of errors presentedexcludes
(OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errorsincludes
and excludes
argument, theexcludes
argument always takes precedence.
includes
(OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errorsclassNames
(OPTIONAL) - use the classNames
argument to pass an alert style to the errors alert. For example,alert-danger
or alert-warning
.Check out the demo application
{{twbs-form-group}}
A Bootstrap 3 .form-group
that accepts a model's errors for a given field
and listens for field errors in order to apply the danger colour and produce
the list of error messages below the form itself.
To understand how this works, familiarize yourself with Bootstrap 3's form validation states. Also recognize that Ember Data model errors can be viewed from a field's perspective and this component is watching that particular view of the errors.
fieldErrors
(REQUIRED) - the model's errors collection for a specificfirstName
you would passmodel.errors.firstName
.Check out the demo application
See the Contributing guide for details.
This project is licensed under the MIT License.