Question

我有一个表单（显然）有一个submit.delegate属性指向我的VM save()方法。

我现在正在构建一个单独的自定义属性，我希望以编程方式提交任何表单。

基本上这是：<form submit.delegate="save()" custom-attribute-here>

然后在我的自定义属性的JS类中，我希望能够：this.el.submit()在这种情况下应该调用表单的submit.delegate方法。

我首先尝试使用this.el.submit()在Chrome或Firefox中无效，但使用this.el.dispatchEvent(new Event('submit', {bubbles: true}))实际上可以在Chrome中使用。 Firefox仍然提交表格＆＃34;通常＆＃34;并忽略submit.delegate属性中的方法。

这个问题的解决方案是否适用于所有浏览器？

Answer 1

虽然不理想，但触发[type=submit]元素的click事件有效：

this.form.querySelector('[type=submit]').click()

Answer 2

我为此创建了customAttribute。使用此customAttribute，您可以在sumbit.delegate标记之外调用form。

使用它

使用ref，form创建对<form role="form" ref="form" submit.delegate="saveEmployee(employee)">代码的引用。
第二次使用单值绑定，请在form标记<button class="btn btn-primary" submit-form.bind="form">Save</button>之外查看更多信息here。

代码在Typescript中。将此课程添加为globalResources。

import { DOM } from 'aurelia-pal';

export class SubmitFormCustomAttribute {
    /**
     * Form element.
     */
    value: Element;
    formSubmitListener = event => {
        this.dispatchFormSubmit(this.value);
    };

    static inject = [Element];
    constructor(private element: Element) { }

    bind() {
        this.element.addEventListener('click', this.formSubmitListener);
    }

    unbind() {
        this.element.removeEventListener('click', this.formSubmitListener);
    }

    dispatchFormSubmit(form: Element) {
        const submitEvent = DOM.createCustomEvent('submit', {
            bubbles: true
        });
        submitEvent.preventDefault();
        form.dispatchEvent(submitEvent);
    }
}

以编程方式提交使用submit.delegate = save（）的Aurelia表单

2 个答案: