paper-input: external validations messages is unusable for server side validation

[panthony]

I'm in a situation where I can't validate some form inputs client-side, I have to submit the form and the server may reject it with a 422 and errors for invalid inputs.

In this case I tried to pass those messages to the input using the errors property but I encountered the following issues:

• The input won't be displayed in error state until the user focus AND loose focus

• The errors won't be cleared when the user modify the value, leaving the feeling to the user that he did not fix the issue

The suggested solution for the first issue was to pass the isTouched attribute to true manually.

And I guess the solution for the second issue would be to have an external observer that reset the errors attribute when the value is updated.

But this is very cumbersome for a pattern that is pretty common I guess.

[mpugach]

@panthony thank you for isTouched hint

This works for me:

import attr from 'ember-data/attr';
import Ember from 'ember';
import Model from 'ember-data/model';

const { computed: { mapBy } } = Ember;

export default Model.extend({
  email: attr('string'),

  emailErrors: mapBy('errors.email', 'message'),
});

{{form.input
  label="Email"
  value=user.email
  errors=user.emailErrors
  onChange=(action (mut user.email))
  isTouched=user.emailErrors.length
}}

type="email" is omitted for this example

[panthony]

@mpugach Let me return the favor for your nice implementation of the workaround :)

[samuraisam]

I just ran into this. Is this something that should just work when the errors attribute is updated?

[mpugach]

it just works for me, because my backend returns a correct errors object, which is understood by JSONAPISerializer

I just need to extract the messages with mapBy

[samuraisam]

That seems like an unnecessary step - my backend returns JSON-API errors as well, and is in turn set on an object (model.validations.attrs.[field].messages, in this case, because of ember-cp-validations). When that object updates the errors display of the field is not updated. I can verify this by inspecting the object before touching the field to see the error message. Once I focus/unfocus the field the error message is correctly displayed.

[mpugach]

do you have a public repo or can you localize it into one?

[wmadden]

I agree, this is a pretty big omission from Ember Paper. Not only do you have to make sure isTouched is true at the right time (i.e. when you've received server errors), it's also completely ignored by paper-autocomplete and paper-chips, and in a large form (i.e. more than one input) setting isTouched by hand is extremely cumbersome.

[mpugach]

PRs are welcome )))

[wmadden]

The last PR I opened was ignored for a month, not especially willing to contribute more

[miguelcobain]

We're all trying to give our best here. Are you referring to this: #693

[wmadden]

Yes, sorry to be so bitter about it

[backspace]

Hey, thanks for the discussion, I was having a hard time getting my JSON API validation errors to show.

I came up with this hackish property to place in a model to construct the necessary arrays to pass to the input components:

  validationErrors: Ember.computed('errors.[]', function() {
    const attributes = Ember.get(this.constructor, 'attributes');

    return attributes._keys.list.reduce((response, key) => {
      const errors = this.get(`errors.${key}`) || [];
      response[key] = errors.mapBy('message');
      return response;
    }, {});
  }),

Then I can set errors=model.validationErrors.name in the component, though I still need the isTouched trick.

Probably there’s a way to avoid using _keys…? I just came up with this now and haven’t tried it out extensively; I’ll update if I need to make any adjustments.

If you have an idea of how you’d want to see this solved, @miguelcobain, I’m willing to try to address it. ember-paper has saved me a lot of work in the complex application I’m creating, so if this is a way I can contribute back, I’d like to.