Dynamically navigate to route with params delegate vs route-href

1

I’m trying to programmatically navigate to a route with params using Aurelia router with navigateToRoute.

When using <a route-href='route: movie-list; params.bind: {id: movieSearchValue}' >Search</a> within the form button it works perfectly and navigates to http://localhost:8080/#/movie-list/jaws (jaws being the search value)

But when trying to use submit.delegate(movieSearch()) with the matching function movieSearch () {this.router.navigateToRoute('movie-list', {id: this.movieSearchValue})} and press enter it navigates to http://localhost:8080/?movie=jaws which of course does not load the view.

Here’s my router config in app.js

import { PLATFORM } from 'aurelia-framework';

export class App {
  constructor () {

  }

  configureRouter(config, router) {
    this.router = router;
    config.title = 'Movie Sharing';
    config.map([
      { route: '', name: 'home', moduleId: PLATFORM.moduleName('index'), title: 'Home'},
      { route: 'movie-list/:id', name: 'movie-list', moduleId: PLATFORM.moduleName('movie-list'), title: 'movie-list'}

    ]);
  }
}

Here’s my view model index.js

import {Router} from 'aurelia-router';
import {inject} from 'aurelia-framework'

@inject (Router)
export class Index {
    constructor(Router) {
        this.router = Router;
        this.movieSearchValue = '';
    }

    movieSearch () {
        this.router.navigateToRoute('#/movie-list', {id: this.movieSearchValue})
    }
}

and here’s the corresponding view index.js

<template>
    <form class="form-example" submit.delegate('movieSearch()')>
        <div class="movie-search">
            <label for="name">Search for a movie you want to rate</label>
            <input type="text" name="movie" id="movie" value.bind="movieSearchValue">
        </div>
        <div class="form-example">
           <button type="submit" value="Search"><a route-href='route: movie-list; params.bind: {id: movieSearchValue}' >Search</a></button>
        </div>
    </form>
</template>

I am getting an error in the console but I’m not sure if it’s directly related to this issue.

WARN [templating-binding] Unknown binding command. 
{defaultBindingMode: null, attrName: "submit", attrValue: "", command: "delegate('moviesearch()')", expression: null}
2

Can you try below and see if it works:

<template>
    <form class="form-example" submit.delegate="movieSearch()">
      ...
    </form>
</template>
3

That was it. Thank you for taking a look. This little error tripped me up for an embarrassing amount of time