Ember.js 余烬辛烷值如何清除表格错误？

这个问题与

问题：清除表单错误的正确方法是什么？我该如何做？我希望每次用户访问表单时都能运行此功能。表单错误在控制器JS文件中生成。用例如下所示：

用户导航到表单

用户提供错误的输入，导致错误被忽略 展示

用户离开表单并执行其他操作

用户返回表单并重新显示现有错误（我不知道） （希望这种情况发生）

在Ember Classic中，我能够使用以下代码片段清除组件JS文件中的表单错误：

从'@ember/array'导入{A}

...

init() {
    this._super(... arguments);
    this.set('errors', A([]));
},

但是，在Ember Octane中，我得到以下ESLint错误：

不要在ES类中使用

this.\u super

es类中的余烬/无余烬超级

我尝试将代码段更改为：

import { A } from '@ember/array';

...

init() {
    super(... arguments);
    this.set('errors', A([]));
}

不幸的是，我得到了以下错误：

super（）仅在子类的类构造函数中有效。大概 方法名（“构造函数”）中的键入错误或未扩展另一个 上课

代码

模板组件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}} />

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

我已经发布了一个余烬旋转：

经典的余烬是

 init() {
    this._super(...arguments);
  }

ember辛烷值使用classe构造函数

constructor() {
    super(...arguments);
  }

看看我做的这个例子：

我已经编辑了你的旋转文件， 我向控制器添加了一个clearErrors操作

 @action
  clearErrors(){
     this.set('errors',[]);
  }

然后a将其作为参数传递给组件

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

---

这并不能清除表单的错误。如何清除表单的错误？请看我添加的示例，看看您将如何处理此问题。很抱歉，我不清楚我的问题中的用例-我已经更新了它。如果可能的话，我希望构造器运行它，而不是清除每个

@action

中的errors数组。我喜欢允许用户清除错误的用例。可以修改以清除用户的表单输入。实际上，每次更改路由时，构造函数都会初始化消息，请再次查看我编辑的示例，如果不是您的情况，则在某种程度上，您是从表单导航而不更改路由，然后，您必须对该事件调用clear操作try with，并将其添加到

did insert

中，以便每次在dom上插入元素时代码都会运行

    constructor() {
        super(...arguments);
        this.args.clearErrors();
    }