ember js variable binding

Ember version: 2.18.0

URL: http://localhost:4200/bands/

/templates/bands.hbs

<button class="btn btn-primary btn-sm new-band-button" onclick=>Add</button>

/controllers/bands.js

export default Controller.extend({
  name: 'abc',

  actions: {
    createBand: function(){
      var name = this.get('name');
    }
  }
});

On startup, the input will have the value 'abc' as defined in the controller.

But in the action, the name returned is still 'abc' whatever I typed in.

Any thoughts?