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:

```
{{card-input placeholder="Card number" action="handleCardNumber" value="cardNumber"}}

```

My `card-input.hbs` component looks like this:

```
{{input placeholder=placeholder value=value key-press=action}}

```

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.