Binding Ember input component to control update on every key-press

I’m building an input that I want to be able to control and validate on the fly. I have a card-input component, which I’ve set up to use like this:

My card-input.hbs component looks like this:

And finally my card-input.js component file:

import Ember from 'ember';

export default Ember.Component.extend({

  classNames: ['checkout-form-group'],

  cardNumber: null,

  actions: {
    handleCardNumber (value) {
      // do some stuff with the value
      this.set('cardNumber', value)
    }
  }

});

Currently the value of the input is being set as cardNumber. Whenever I key-press on the card-input, I want to be able to control and set the cardNumber, which will then be updated back at the card-input.

Not even sure this is the best way to do things. Any help would be greatly appreciated.