Ember Octane 如何获取要显示的错误消息？

Question

这个问题与Ember Octane Upgrade How to pass values from component to controller 有关

如何让 Ember Octane 显示在网页上？ 例如，如果旧密码和新密码相同，我们希望该错误显示在页面上。

Ember-Twiddle在这里

代码示例：

用户输入表格

更改密码表格.hbs

<div class="middle-box text-center loginscreen animated fadeInDown">
    <div>
        <h3>Change Password</h3>
        <form class="m-t" role="form" {{on "submit" this.changePassword}}>
            {{#each this.errors as |error|}}
                <div class="error-alert">{{error.detail}}</div>
            {{/each}}
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="Old Password" @value={{this.oldPassword}} required="true" />
            </div>
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="New Password" @value={{this.newPassword}} required="true" />
            </div>
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="Confirm Password" @value={{this.confirmPassword}} required="true" />
            </div>
            <div>
                <button type="submit" class="btn btn-primary block full-width m-b">Submit</button>
            </div>
        </form>
    </div>
</div>

模板组件

更改密码.hbs

<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />

成分

更改密码表单.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ChangePasswordForm extends Component {

    @tracked oldPassword;
    @tracked newPassword;
    @tracked confirmPassword;
    @tracked errors = [];

    @action
    changeOldPassword(ev) {
        this.oldPassword = ev.target.value;
    }
    @action
    changeNewPassword(ev) {
        this.newPassword = ev.target.value;
    }
    @action
    changeConfirmPassword(ev) {
        this.confirmPassword = ev.target.value;
    }

    @action
    changePassword(ev) {

        ev.preventDefault();

        this.args.changePassword({
            oldPassword: this.oldPassword,
            newPassword: this.newPassword,
            confirmPassword: this.confirmPassword
        });
    }
}

控制器

更改密码.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ChangePassword extends Controller {

    @service ajax
    @service session

    @action
    changePassword(attrs) { 

        if(attrs.newPassword == attrs.oldPassword)
        {
shown in the UI.
            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.ajax.request(this.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);
            });
        }
    }
}

模型

更改密码.js

import Route from '@ember/routing/route';
import AbcAuthenticatedRouteMixin from '../../mixins/efa-authenticated-route-mixin';

export default class ChangePasswordRoute extends Route.extend(AbcAuthenticatedRouteMixin) {

    model() {

        // Return a new model.
        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    }
}

Answer 1

在您的表单组件中，您引用了类似的错误

{{#each this.errors as |error|}}
  <div class="error-alert">{{error.detail}}</div>
{{/each}}

从类组件 -> 微光组件，访问组件参数与组件自身值的方式发生了根本性的转变（为了更好！）

在类组件中，参数直接分配给类实例。 多年来，这导致了很多问题，从方法和操作被覆盖，到内部类值和参数之间的差异难以推理的不清晰代码。

新组件通过将所有参数放在一个可用作 args 属性的对象中来解决这个问题。

在 javascript 中引用组件的参数时，您使用： this.args.someArg 。 在模板中，您使用速记@someArg 。 这些被称为“命名参数”（请随意阅读rfc以获取更多信息）。 当您像这里this.errors在模板中使用this.errors时，您正在寻找本地组件属性errors 。

只是强调一下，这不起作用，因为这里的错误是通过@errors传递给Clients::ChangePasswordForm ：

<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />

并且必须是模板中的@errors

{{#each @errors as |error|}}
  <div class="error-alert">{{error.detail}}</div>
{{/each}}