CODEWITHSUNDEEP
javascriptember.js
gosseti
gosseti

Reputation: 975

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:

{{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.

Upvotes: 1

Views: 337

Answers (2)

Ember Freak
Ember Freak

Reputation: 12872

You can pass cardNumber.

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

and use it inside input helper.

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

Upvotes: 2

Daniel
Daniel

Reputation: 18672

You can use normal HTML5 element and only bind actions:

<input placeholder={{placeholder}} value={{value}} onkeypress={{action 'handleCardNumber' value='target.value'}} />

Upvotes: 0

Related Questions