Ember Octane如何显示错误消息

Question

这个问题与Ember Octane升级有关如何将值从组件传递到控制器

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

Ember Twiddle here

代码示例：

用户输入表单

ChangePasswordForm.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}} />

组件

ChangePasswordForm.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
});
}
}

控制器

ChangePassword.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);
});
}
}
}

型号

ChangePassword.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时，您正在查找本地组件属性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}}