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

Question

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

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

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

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

我首先尝试使用 this.el.submit()，它在 Chrome 或 Firefox 中均无效，但使用 this.el.dispatchEvent(new Event('submit', {bubbles: true})) 实际上在 Chrome 中有效。 Firefox 仍然提交表单 "normally" 并忽略 submit.delegate 属性中的方法。

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

Answer 1

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

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

Answer 2

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

使用它

使用 ref、<form role="form" ref="form" submit.delegate="saveEmployee(employee)">.

form

第二次使用单值绑定，查看更多信息 here，在 form 标签之外 <button class="btn btn-primary" submit-form.bind="form">Save</button>。

代码在 Typescript 中。将此 class 添加为 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 表单

Programmatically submit Aurelia form that uses submit.delegate=save()

javascript

form-submit

dispatchevent

aurelia