Form-wide way to set error message on a field

[kettanaito]

What

I suggest to expose a setError() method to set the error message to the provided field.

Why

Right now there is no way to set an error message to the specific field outside of the validation schema. Form asynchronous validation may often require to patch error messages to specific fields.

How

endUsageMethod() {
  this.formRef.setError('fieldName', 'Error message here');
}

Alternatively:

endUsageMethod() {
  this.formRef.setError({
    fieldName: 'Error message here',
    groupName: {
      fieldName: 'Another error message'
    }
  });
}

Specification

• Support to set error message on the desired field
• Support to set error messages on multiple fields at once

API

// single field
this.formRef.setError(['fieldName'], 'Error message')

// single grouped field
this.formRef.setError(['groupName', 'fieldName'], 'Error message')

// multiple fields
this.formRef.setError({
  fieldOne: 'Message one',
  fieldTwo: 'Message two'
})

[kettanaito]

Another, more rigid suggestion, is to add support for onSubmitFailed to return an Object representing fields mapped to their error messages. This would work better in submit scenarios, but the usage will be limited to them only.

handleSubmitFailed = ({ res }) => {
  return {
    username: 'User already registered',
    billingAddress: {
      vatNumber: 'VAT number is not valid'
    }
  }
}

It would be good to design an API that would allow to set error on a field from anywhere, at any point of time, since usage scenarios may vary drastically. I also dislike the assumption that any end-point will be aware of fields structure, therefore fields error map composition will always be manual.