Angular: Angular Form ngSubmit event type error in Chrome 81

[szepeshazi]

Using dart 2.7.2, angular 5.3.1, angular_forms 2.1.2, Chrome 81, and the following minimal example
(important update: it seems that this behavior only occurs in Chrome 81, other browsers did not throw when running the example below)

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'my-app',
  template: '''
  <form #myForm="ngForm" (ngSubmit)="submitForm">
      <input type="submit" value="Submit">
  </form>''',
  directives: [formDirectives],
)
class AppComponent {
  void submitForm() => print("Form submitted");
}

This project, when compiled to JavaScript and served (i.e. webdev serve web:8040 --auto refresh -- --release) will throw the following JS error upon clicking the submit button:

EXCEPTION: TypeError: Instance of 'UnknownJavaScriptObject': type 'UnknownJavaScriptObject' is not a subtype of type 'Event'
STACKTRACE: 
TypeError: Instance of 'UnknownJavaScriptObject': type 'UnknownJavaScriptObject' is not a subtype of type 'Event'
    at Object.wrapException (http://localhost:8040/main.dart.js:518:17)
    at Object.propertyTypeError (http://localhost:8040/main.dart.js:1012:15)
    at Object.interceptedTypeCheck (http://localhost:8040/main.dart.js:1019:9)
    at ViewAppComponent0._handle_submit_0_0$1 (http://localhost:8040/main.dart.js:10226:9)
    at Object.eval (eval at Closure_forwardCallTo (http://localhost:8040/main.dart.js:867:14), <anonymous>:3:40)
    at AppView_eventHandler1__closure.call$0 (http://localhost:8040/main.dart.js:9313:27)
    at NgZone__run_closure.call$0 (http://localhost:8040/main.dart.js:9574:26)
    at StaticClosure._rootRun [as call$1$4] (http://localhost:8040/main.dart.js:2314:16)
    at NgZone._run$1$4 (http://localhost:8040/main.dart.js:9469:158)
    at Object.eval (eval at Closure_forwardCallTo (http://localhost:8040/main.dart.js:867:14), <anonymous>:3:47)

For convenience, I disabled minification when compiling the project to see the actual error properly. The issue is not present, when compiling the project with ddc, or when using the --omit-implicit-checks compiler flag for dart2js.

The issue is present in various dart, angular and angular_forms versions, and can also be seen at the official forms example at https://angulardart.dev/examples/forms
The bug is quite severe as it will also trigger a page reload for the current page.

[ganigeorgiev]

@szepeshazi This maybe is expected behavior, since ngSubmit is trying to pass $event as an argument to submitForm but it doesn't accept any. Changing the binding to (ngSubmit)="submitForm()" (or specifying an argument to your function declaration) should fix the issue.

[szepeshazi]

@ganigeorgiev It does not. I tried every possible combinations of passing and not passing parameters, like void submitForm(dynamic _) instead of void submitForm() etc, it will still have a type error.

Did you try any solution regarding this issue? Was there any way you could make the form submission work?

[ganigeorgiev]

@szepeshazi Hm, I'm not sure then what the problem may be. I've just tried it with Angular 6-alpha/angular_form 2.1.4 and it works fine (ddc and dart2js).

[szepeshazi]

@ganigeorgiev I'm not sure either :D
Here is the repo to reproduce: https://github.com/szepeshazi/angular-form-submit
I also tried it with Angular 6 alpha and forms 2.1.4, it produces the same behavior

Did you try it with dart2js instead of ddc? Did you see any error messages in Chrome console, after you checked the preserve log option? How did you verify it is working fine - did you see a print message "form submitted" in the console?

[atn832]

My AngularDart also started breaking with this issue after updating Chrome to version 81. I'm using Angular 6 alpha. It breaks when using dart2js and works with ddc.

[szepeshazi]

@atn832 Thanks for verifying. Didn't think this had any relation to Chrome version, but will look into it. I admit I only experienced this issue quite recently, possibly after an upgrade to Chrome 81, but not sure about that yet.

[atn832]

Yes my webapp compiled long ago suddenly broke after upgrading to Chrome 81, and I've verified before and after both on Mac OS and Windows.

[ganigeorgiev]

@szepeshazi Just tested your example and for me it works fine (with webdev serve --release). There were no errors, only the constructor and method print statements.

[szepeshazi]

@ganigeorgiev what browser did you use for the test? It seems this issue may be connected to the latest Chrome (v81)

[ganigeorgiev]

@szepeshazi Chrome 80.0.3 but I doubt that it is browser specific. Does the error occur in Firefox?

[szepeshazi]

@ganigeorgiev Just checked this, and no, it does not occur in Firefox. However it does occur in Chrome 81.xx
I'll try to roll back to Chrome 80.xx to see if it behaves differently

[szepeshazi]

I just verified via Browserstack that this only occurs in latest stable Chrome (version 81). I'll change the issue title and description accordingly.

[ganigeorgiev]

Just a side note, the issue may be related to the new SubmitEvent interface introduced in Chrome 81 - https://www.chromestatus.com/feature/5187248926490624.

[szepeshazi]

@ganigeorgiev quite possibly, thanks for pointing this out

[szepeshazi]

Temporary workaround until this gets fixed:

• remove the (ngSubmit) output binding from your form element
• remove any input[type="submit"] and button[type="submit"] elements from your form
• use a MaterialButton with its (trigger) set to your own submission function to submit the form

This way the form is submittable in Chrome 81, however the form submission will not be triggered by pressing enter anywhere.

[ganigeorgiev]

@szepeshazi The issue seems to be fixed in dart 2.8+. A temporary solution for 2.7 could be found here - https://github.com/dart-lang/sdk/issues/40901#issuecomment-611102767

[vadimtsushko]

We've been bitten by this bug too recently.
Our temrorary solution is

• remove the (ngSubmit) output binding from your form element
• remove type="submit" attribute from submit button
• move method formerly referred by (ngSubmit) form binding to (click) event binding of submit button
• add $event parameter of MouseEvent type to this method (MouseEvent event)
• add event.preventDefault() ( and event.stopPropagation() for good measure ) on top of this method

[kareljuricka]

Another "quickfix" is only to add:
onsubmit="return false"
to all <form... > elements.

Example:
<form [ngFormModel]="form" (ngSubmit)="onSubmit()" onsubmit="return false">
It doesn't solve error in console but it prevent page to be reloaded.