Upgrade from Ember < 3.15 to >= 3.15. How do I pass form values from a controller into a component?
I cannot begin to explain the number of diagnostic combinations attempted and their corresponding errors received. So, I figure it best to ask how it should be done correctly? Is Glimmer involved?
A simple example: pass a change password from old
password to both a new
and confirm
password via a component to a controller. In the Component, I keep getting onsubmit() is not a function
errors.
Code example:
Component
import Component from '@ember/component';
import { A } from '@ember/array';
export default Component.extend({
didReceiveAttrs() {
this._super(... arguments);
this.setProperties({
oldPassword: this.get('chgpwd.oldPassword'),
newPassword: this.get('chgpwd.newPassword'),
confirmPassword: this.get('chgpwd.confirmPassword')
});
},
init() {
this._super(... arguments);
this.set('errors', A([]));
},
actions: {
changePassword(ev) {
ev.preventDefault();
this.onsubmit({
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword
});
},
},
});
Controller
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default Controller.extend({
ajax: service('ajax'),
session: service('session'),
actions: {
changePassword(attrs) {
if(attrs.newPassword == attrs.oldPassword)
{
this.set('errors', [{
detail: "The old password and new password are the same. The password was not changed.",
status: 1003,
title: 'Change Password Failed'
}]);
}
else if(attrs.newPassword != attrs.confirmPassword)
{
this.set('errors', [{
detail: "The new password and confirm password must be the same value. The password was not changed.",
status: 1003,
title: 'Change Password Failed'
}]);
}
else
{
let token = this.get('session.data.authenticated.token');
this.get("ajax").request(this.get('store').adapterFor('application').get('host') + "/clients/change-password", {
method: 'POST',
data: JSON.stringify({
data: {
attributes: {
"old-password" : attrs.oldPassword,
"new-password" : attrs.newPassword,
"confirm-password" : attrs.confirmPassword
},
type: 'change-passwords'
}
}),
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/vnd.api+json',
'Accept': 'application/vnd.api+json'
}
})
.then(() => {
this.transitionToRoute('clients.change-password-success');
})
.catch((ex) => {
this.set('errors', ex.payload.errors);
});
}
},
},
});
Aucun commentaire:
Enregistrer un commentaire