[英]Ember Octane How to Get Error Messages to be Displayed?
This question is related to Ember Octane Upgrade How to pass values from component to controller这个问题与Ember Octane Upgrade How to pass values from component to controller 有关
How do I get Ember Octane to display on the webpage?如何让 Ember Octane 显示在网页上? For instance, if the old password and new password are the same we want that error to display on the page.例如,如果旧密码和新密码相同,我们希望该错误显示在页面上。
Ember-Twiddle here Ember-Twiddle在这里
Code example:代码示例:
User Input Form用户输入表格
ChangePasswordForm.hbs更改密码表格.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>
Template Component模板组件
ChangePassword.hbs更改密码.hbs
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
Component成分
ChangePasswordForm.js更改密码表单.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
});
}
}
Controller控制器
ChangePassword.js更改密码.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);
});
}
}
}
Model模型
ChangePassword.js更改密码.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: ''
};
}
}
In your form component, you reference the errors like在您的表单组件中,您引用了类似的错误
{{#each this.errors as |error|}}
<div class="error-alert">{{error.detail}}</div>
{{/each}}
From class components -> glimmer components, there's been a fundamental shift in the way you access the component's arguments vs the component's own values (for the better!)从类组件 -> 微光组件,访问组件参数与组件自身值的方式发生了根本性的转变(为了更好!)
In class components, arguments are assigned directly to the class instance.在类组件中,参数直接分配给类实例。 This has caused a lot of issues over the years, from methods and actions being overwritten, to unclear code where the difference between internal class values and arguments is hard to reason about.多年来,这导致了很多问题,从方法和操作被覆盖,到内部类值和参数之间的差异难以推理的不清晰代码。
New components solve this by placing all arguments in an object available as the args property.新组件通过将所有参数放在一个可用作 args 属性的对象中来解决这个问题。
When referencing an argument to a component in javascript, you use: this.args.someArg
.在 javascript 中引用组件的参数时,您使用: this.args.someArg
。 In the template, you use the shorthand @someArg
.在模板中,您使用速记@someArg
。 These are known as "named arguments" (feel free to read the rfc for more info).这些被称为“命名参数”(请随意阅读rfc以获取更多信息)。 When you, as you did here, use this.errors
in your template, you are looking for a local component property errors
.当您像这里this.errors
在模板中使用this.errors
时,您正在寻找本地组件属性errors
。
Just to emphasize, this does not work because errors is passed to Clients::ChangePasswordForm
via @errors
here:只是强调一下,这不起作用,因为这里的错误是通过@errors
传递给Clients::ChangePasswordForm
:
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
and must be @errors
in the template并且必须是模板中的@errors
{{#each @errors as |error|}}
<div class="error-alert">{{error.detail}}</div>
{{/each}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.