Getting error after migrating to Ember octane

Question

I am using Ember 3.16.3 and i am getting this error on the following code :

Error: Assertion Failed: You must pass a function as the second argument to the on modifier

//login.hbs

 <form {{on "submit" this.login}}>
       <Input type="email" placeholder="email" @value={{this.email}} />
      <button type="submit">login</button>
 </form>

.

//login.js

import Route from '@ember/routing/route';

import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class LoginRoute extends Route {

   @tracked email = '';

   @action
   login(event) {
     event.preventDefault();

     // do some operations ...
  }
}

Answer 1

As specified in the error, the on modifier should receive a valid function to execute. As mentioned in the guides,

If you add the {{action}} helper to any HTML DOM element, when a user clicks the element, the named event will be sent to the template's corresponding component or controller.

This holds good for on modifier or any values that are used in the template. You can think of routes to be a part where we fetch data for the corresponding page. Any other backing property or computation has to be defined inside a controller or component to be used in the template.

Hence, moving your login action to a Controller will solve this issue. Additionally, you need to move email to the controller as well, or you won't see updates to it work correctly.