hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-06 10:01:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve form error handling; fix control css class

Browse source
This commit is contained in:
SachaG 2018-04-09 13:10:42 +09:00
parent 9b3b545219
commit cc97d1a473
2 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/vulcan-forms/lib/components/Form.jsx
View file

@ -322,21 +322,40 @@ class Form extends Component {
// ------------------------------- Errors ------------------------------ //
// --------------------------------------------------------------------- //
// add error to form state
// from "GraphQL Error: You have an error [error_code]"
// to { content: "You have an error", type: "error" }
/*
Convert GraphQL error into SmartForm-compatible error
*/
convertError = error => ({
id: error.id,
path: error.data.name,
data: error.data,
});
/*
Add error to form state
Errors can have the following properties:
- id: used as an internationalization key, for example `errors.required`
- path: for field-specific errors, the path of the field with the issue
- data: additional data. Will be passed to vulcan-i18n as values
*/
throwError = error => {
let formErrors = [];
// if this is one or more GraphQL errors, extract them
let formErrors = [error];
// if this is one or more GraphQL errors, extract and convert them
if (error.graphQLErrors) {
// get graphQL error (see https://github.com/thebigredgeek/apollo-errors/issues/12)
const graphQLError = error.graphQLErrors[0];
formErrors = graphQLError.data.errors;
} else {
formErrors = [error];
formErrors = graphQLError.data && graphQLError.data.errors;
formErrors = formErrors.map(this.convertError);
}
// eslint-disable-next-line no-console
console.log(formErrors);
// add error(s) to state
this.setState(prevState => ({
errors: [...prevState.errors, ...formErrors],

5
packages/vulcan-forms/lib/components/FormComponent.jsx
View file

@ -106,7 +106,7 @@ class FormComponent extends PureComponent {
*/
getErrors = () => {
const fieldErrors = this.props.errors.filter(error => error.data.name === this.props.path);
const fieldErrors = this.props.errors.filter(error => error.path === this.props.path);
return fieldErrors;
};
@ -281,7 +281,8 @@ class FormComponent extends PureComponent {
const { beforeComponent, afterComponent, max, name, control } = this.props;
const hasErrors = this.getErrors() && this.getErrors().length;
const inputClass = classNames('form-input', `input-${name}`, `form-component-${control || 'default'}`, {
const controlName = typeof control === 'function' ? control.name : control;
const inputClass = classNames('form-input', `input-${name}`, `form-component-${controlName || 'default'}`, {
'input-error': hasErrors,
});