dimanche 15 mars 2020

Ember Octane Upgrade How to pass values from controller to component

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