灰烬辛烷值如何清除表格错误？ [英] Ember Octane How to Clear Form Errors?
问题描述
此问题与 Ember Octane如何获取要显示的错误消息？
问题：清除表格错误的正确方法是什么？我该怎么做？我希望每次用户来到表单时都运行此命令。格式错误在Controller JS文件中生成。用例如下：
Question: What is the correct way to clear form errors and how do I do it? I want this to run everytime the user comes to the form. The form errors are generated in the Controller JS file. The use case is as follows:
- 用户导航至表单
- 用户提供了错误的输入，结果错误，以显示
- 用户离开表单并执行其他操作
- 用户返回到表单和现有表单错误重新显示（我不希望
发生这种情况）
- User navigates to form
- User provides erroneous input, resulting in errors to be displayed
- User navigates away from the form and does something else
- User comes back to the form and the existing errors re-display (I do not want this to happen)
在Ember Classic中，我可以清除表格使用以下代码段在组件JS文件中出现错误：
In Ember Classic, I am able to clear form errors within the component JS file using the following code snippet:
从'@ ember / array'导入{A}；
import { A } from '@ember/array';
...
init() {
this._super(... arguments);
this.set('errors', A([]));
},
但是，在Ember Octane中，出现以下ESLint错误：
However, in Ember Octane, I get the following ESLint error:
在ES类中不要使用
this._super
ember / no -ember-super-es-es-classes
Don't use
this._superin ES classes ember/no-ember-super-in-es-classes
我尝试将代码段更改为：
I tried changing the code snippet to:
import { A } from '@ember/array';
...
init() {
super(... arguments);
this.set('errors', A([]));
}
不幸的是，我收到以下错误：
Unfortunately, I get the following error:
super（）仅在子类的类构造函数内有效。可能是方法名称中的
a拼写错误（构造函数）还是没有扩展另一个
类？
super() is only valid inside a class constructor of a subclass. Maybe a typo in the method name ('constructor') or not extending another class?
代码
模板组件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 @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 @changePasswordModel={{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 {
constructor() {
super(...arguments);
this.errors = []
}
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;
@tracked errors;
@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)
{
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);
});
}
}
}
我发布了一个Ember-缠绕：
I have posted an Ember-Twiddle:
https://ember-twiddle.com/364eaf05a2e1072994b61f255032eb62?openFiles=templates.application%5C.hbs%2C
推荐答案
经典余烬
init() {
this._super(...arguments);
}
ember Octane uses classe constructor
constructor() {
super(...arguments);
}
我做了这个例子：
示例
我已经编辑了旋转文件，
i向控制器添加了clearErrors操作，
i have edited your twiddle file, i added a clearErrors action to the controller,
@action
clearErrors(){
this.set('errors',[]);
}
然后将其作为参数传递给组件，
then a passed it as argument to the component ,
<Clients::ChangePasswordForm @changePasswordModel={{this.model}} @changePassword={{action 'changePassword'}}
@clearErrors={{action 'clearErrors'}}
@errors={{this.errors}} />
然后在组件的每个init上调用clearErrors，
then on each init of component i call clearErrors ,
constructor() {
super(...arguments);
this.args.clearErrors();
}
这篇关于灰烬辛烷值如何清除表格错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
