Aurelia 2 form submit - preventDefault()


I have been playing with Aurelia 2 and it seems there might be a regression in regards to summitting forms.

<form role="form" submit.delegate="submit()">

this used to work fine with Aurelia 1 but in aurelia 2 it seems event.preventDefault() is not handled for you and im having to do the following…


<form role="form" submit.delegate="submit($event)">


async submit(event: Event) : Promise<void> {
    event.preventDefault(); // - don't need to do this in aurelia 1

Am I doing something wrong?

1 Like

The behavior you mentioned is intended to be in a compat/quality of life package that should come sometimes. So that we don’t force application to have that behavior if they don’t need to. Even 99% of them need it.

Do u know when this quality of life compatibility package will be released?

1 Like

In v1, even without the event.preventDefault(), it wouldn’t reload the page as preventDefault() is called by default without true return in the handler. This has been changed in our current v2.

For the QoL package, I’ll add it soon, maybe a day or 2, to sort out what to have initially beside this

@milkshakeuk .trigger by default will call preventDefault() like v1, you can use it instead of .delegate

@bigopon okay but wasn’t it the case that delegate was preferred over trigger in most cases?


Yes it is preferred, still is for now. Though I think we may need to re-evaluate this, with shadow DOM in the picture. Everything is working but the trade off between perf and standard compatibility is not easily determined anymore.


I could be mistaken but even with this change in v2 it should be fairly straightforward to make this more explicit and easy to follow by adding a simple binding behavior - something like:

export class PreventDefaultBindingBehavior {
    bind(binding, source) {
        binding.standardCallSource = binding.callSource;
        binding.callSource = function (event) {

    unbind(binding, source) {
        binding.callSource = binding.standardCallSource;
        binding.standardCallSource = null;

then in the template:

<form submit.delegate="myfunction() & preventDefault">