[英]Ember Octane How to Clear Form Errors?
這個問題與Ember Octane 如何獲取要顯示的錯誤消息有關?
問題:清除表單錯誤的正確方法是什么,我該怎么做? 我希望每次用戶訪問表單時都運行它。 表單錯誤在 Controller JS 文件中生成。 用例如下:
在 Ember Classic 中,我可以使用以下代碼片段清除組件 JS 文件中的表單錯誤:
從'@ember/array'導入{A};
...
init() {
this._super(... arguments);
this.set('errors', A([]));
},
但是,在 Ember Octane 中,我收到以下 ESLint 錯誤:
不要在 ES 類 ember/no-ember-super-in-es-classes 中使用
this._super
我嘗試將代碼段更改為:
import { A } from '@ember/array';
...
init() {
super(... arguments);
this.set('errors', A([]));
}
不幸的是,我收到以下錯誤:
super() 僅在子類的 class 構造函數內有效。 可能是方法名稱中的拼寫錯誤(“構造函數”)或沒有擴展另一個 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>
模板哈佛商學院:
<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
});
}
}
Controller 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-Twiddle:
https://ember-twiddle.com/364eaf05a2e1072994b61f255032eb62?openFiles=templates.application%5C.hbs%2C
經典的余燼是
init() {
this._super(...arguments);
}
ember Octane 使用類構造函數
constructor() {
super(...arguments);
}
看看我做的這個例子: 例子
我已經編輯了你的旋轉文件,我在 controller 添加了一個 clearErrors 操作,
@action
clearErrors(){
this.set('errors',[]);
}
然后將它作為參數傳遞給組件,
<Clients::ChangePasswordForm @changePasswordModel={{this.model}} @changePassword={{action 'changePassword'}}
@clearErrors={{action 'clearErrors'}}
@errors={{this.errors}} />
然后在組件的每個初始化上,我調用 clearErrors,
constructor() {
super(...arguments);
this.args.clearErrors();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.