I have implemented register as component which handles Client side validation as well as other issues. When validation is ok I send registration data to route via sendAction. The problem is, at the server some field might be invalid. For example username must be unique and current user might well use the user that is already in the database. So I need a way to tell the component that there was error in server.
As new ember.js programmer trying to avoid the Controller as much as I can, what is the way to go?
I’m having trouble translating step 5 into thing that ember would support.
What if, in step 1, that component was instantiated with an “empty” non-persisted user model; one that you could keep track of through the entire existence of your sign up form? In other words, the sign up form continues to exist until the user model is persisted and free of errors.
{{#if model.isNew}}
{{#if model.serverErrors}}
<p>Couldn't save the user due to {{ model.serverErrors }}</p>
{{/if}}
... all the rest of the form stuff ....
{{/if}}
When first displayed the User model is empty and has no errors so you just see the form. Once the form is submitted you try to persist it in the signupUser action. If the model saves, then the component hides itself. If the model doesn’t save then the model gets the errors from the server and, due to the binding of the model to the component, the user immediately sees the error message.
actions: {
signupUser: function(userModel) {
userModel.save().then(() => {
userModel.set('serverErrors', null);
// userModel.get('isNew') is now false and errors are empty; the form disappears...
}, (errs) => {
userModel.set('serverErrors', errs);
// at this point, because the signup form component is bound to the user model
// the error message displays.
});
}
}
It’s not “sending” a message as you describe in step 5. It’s more of monitoring the state of the model until the model is good.
Thanks for great example. I now understand better. I will use this knowledge to fix my issue.
As for 5 its my poor language. Forgive me for that. Am not well versed in ember terms yet. What I mean is once I have errors from server I want to display them back to the user, that simple!
One more question, the signupUser action takes a model from component, does it mean its created inside component and keep circulating? I’m sorry am not good at graphically explains things (forgive me for that too), but that sound too complicated for such a task. I just want to have a way to tell the component that “Hey display for me this”. As for hiding the form, I plan to do transition to index with message of success. So the form will stay there until user either closes browser or succesful registers.
I hope I have not added confusion.
TL;DR I want to post just error object from Route to Component