CODEWITHSUNDEEP
ember.jsember-cli
user7474631
user7474631

Reputation:

Live actions in Ember

How can we implement live actions in ember without reload or pressing an action button?

for example, if I'm filling a form to change the password, In the confirm password input, I need to check the matching of these two passwords lively(without pressing any button) This is just a case? how can I implement this?

Upvotes: 0

Views: 32

Answers (1)

mistahenry
mistahenry

Reputation: 8724

See the twiddle or gist. There's plenty of different approaches.

1). Bind an action to the oninput event of two input fields

<input value={{password2}} oninput={{action 'setPassword2' value="target.value"}} />
<input value={{passwordConfirm2}} oninput={{action 'setPasswordConfirm2' value="target.value"}} />

with custom action handlers that invoke a function on input:

actions: {
  setPassword2(val){
    this.set('password2', val);
    this.updatePasswordsMatch2();
  },
  setPasswordConfirm2(val){
    this.set('passwordConfirm2', val);
    this.updatePasswordsMatch2();
  }
},
updatePasswordsMatch2(){
  this.set('passwordsMatch2', this.get('password2') === this.get('passwordConfirm2'));   
}

2). Same as above but use onchange if you only want the event to fire on blur + change

3). 2way binding (old school ember way) with computed properties observing both the password and the confirm:

passwordsMatch: computed('password', 'passwordConfirm', function(){
   return this.get('password') === this.get('passwordConfirm'); 
})

Upvotes: 1

Related Questions