Created
August 9, 2019 12:42
-
-
Save slykar/fe79c98bcb18236c7f78d20e525986ad to your computer and use it in GitHub Desktop.
How to specify Buefy field type more easily when doing a form validation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Returns an object with definition of <b-field :type> for Buefy. | |
* | |
* Instead of setting the field type like this: | |
* | |
* <b-field :type="{ 'is-danger': errors.has('field_name') }"></b-field> | |
* | |
* You can now use it like this: | |
* | |
* get fieldTypes() { | |
* return getFormFieldTypeOnError(Object.keys(this.formData), this.$validator.errors); | |
* } | |
* | |
* <b-field :type="fieldTypes.field_name"></b-field> | |
*/ | |
export function getFormFieldTypeOnError(formKeys: string[], errorBag: ErrorBag, errorType = 'is-danger') { | |
const initialTypes = {}; | |
return formKeys.reduce((fieldTypes: object, field: string) => { | |
const fieldTypeDef = {[errorType]: errorBag.has(field)}; | |
return { | |
...fieldTypes, [field]: fieldTypeDef, | |
}; | |
}, initialTypes); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment