ember-validatable-input v1.0.0
ember-validatable-input (DEMO)
A validation library agnostic wrapper for Ember's input helper that makes it easy to display validation errors.
The addon adds a validatable-input
component to allow your app to show users whether their input is valid. It will work with any validation library, such as ember-cp-valiadtions or ember-changeset-validations, as long as it is possible to pass the error messages as a list to the component. It passes through many of the common options for Ember's Input Helpers if your app needs to pass through an option that isn't supported by this component please open an issue or create a PR.
Compatibility
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
Installation
ember install ember-validatable-input
Usage
Options
// form.hbs
{{validatable-input
//Validation
allowInvalidDisplay=true //Allow the component to show an invalid style when there are errors (default: true).
allowValidDisplay=true //Allow the component to show a valid style when there are not errors (default: true).
errors=[] //A list of errors for the component.
showErrors=true //Allow the component to show an error message when errors are present (default: true).
//Input Passthrough
autocomplete=null
inputClass=null //The is set to classNames on the input. The passed value is automatically made HTML safe.
maxlength=null
name=null
pattern=null
placeholder=null
type='text'
value=null
}}
Style Customization
There are no default styles included with this addon.
To style in <input>
you can pass an inputClass
when initializing the component.
// app.scss
.my-custom-input {};
// my_template.hbs
{{ember-validatable-input
inputClass='my-custom-input'
}}
To customize the styles for when the component is in the valid or invalid state override the following classes.
// app.scss
.ember-validatable-input--is-invalid {
input {
box-shadow: inset 0 0 0 1px $red;
}
}
.ember-validatable-input--is-valid {
input {
box-shadow: inset 0 0 0 1px $green;
}
}
.ember-validatable-input__error {
color: $red;
}
Contribution
Please read the contribution guide and the code of conduct.
License
This project is licensed under the MIT License.
5 years ago