ember.js - How do I turn my form into an ember component? -

i have form:

<form {{action 'resetpassword' on="submit"}}>   {{input type="password" value=newpassword placeholder="reset password"}}<br>   {{#if newpassword}}     {{input type="password" value=confirmpassword placeholder="confirm password"}}     {{#if passwordok}}       <button>reset</button>     {{/if}}   {{/if}} </form> 

it relies on resetpassword action being available , passwordok function tests password has been entered , confirmation matches.

this smashing think need use form multiple times in app. assume should make component.

how can turn form reusable component?

i'm interested in how take chunk of functionality , make available throughout app. how package , re-use it?

possibly late party may else.

a 5 minute guide creating ember form component ember cli

1. generate new project - "ember new quick-form"
2. navigate directory type - "ember g component password-component"

3. in project directory, go app > components > password-component.js. there, replace code this:

   import ember 'ember';  export default ember.component.extend({     passwordok: function(){     return this.get('newpassword')===this.get('confirmpassword');      }.property('newpassword','confirmpassword'),  actions: {   resetpassword: function() {     alert(this.get('newpassword'));       }       }   });   

4. go app > templates > components > password-component. there, replace {{yield}} this:

   <form {{action 'resetpassword' on="submit"}}>     {{input type="password" value=newpassword placeholder="reset password"}}<br>       {{#if newpassword}}         {{input type="password" value=confirmpassword placeholder="confirm password"}}           {{#if passwordok}}             {{input type="submit" value="submit"}}           {{else}}           passwords don't match           {{/if}}         {{/if}}   </form>   

5. in app > templates > application.hbs, add component you've created adding this: "{{password-component}}"

6. build project ("ember s")

7. your component should visible. adding content input field , clicking on submit, should show contents of typed in.