This addon helps present your Ember-Data model errors in a consistent fashion using Bootstrap3 alerts and help-blocks.
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
- Ember Data - the
twbs-errors-alert&twbs-form-groupcomponents depend on Ember Data's modeling of errors. - You should have Bootstrap 3.x
ember 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 and prepares a bootstrap alert box with the fields you want in a bulleted list.{{twbs-form}}- a component that creates a form element that you can easily bind the submit and reset action to. Then all you need to do is add a submit and/or reset button to your form.{{twbs-form-group}}- a component generating a Bootstrap<div class="form-group">...</div>that has intelligence built in to detect when it's field enters the error-state; the.has-errorclass will be applied and error messages will be appended to the bottom of the component's template.
Further 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/
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 to be submitted by a basic submit button or by pressing enter while focused on an input. Ideal for posting model changes.reset(OPTIONAL) - the action the will be fired when the form is reset by clicking on a basic reset button. Ideal for rolling back model changes.
Check out the demo application
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'sDS.Errorscollection is the source for the list of errors presented in the alert.excludes(OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errors will be ignored and not presented in the list. If you specify both anincludesandexcludesargument, theexcludesargument always takes precedence.includes(OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errors should be included in the list.classNames(OPTIONAL) - use theclassNamesargument to pass an alert style to the errors alert. For example,alert-dangeroralert-warning.
Check out the demo application
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 specific field. For example, if your model has a field namedfirstNameyou would pass the following:model.errors.firstName.
Check out the demo application
- Do you have Ember Data in your application and are using it for your data modeling?
- Is Bootstrap 3 installed? As the addon's name states, this isn't Bootstrap 4 ready.
See the Contributing guide for details.
This project is licensed under the MIT License.