Fire form submit event from custom component

Question

I'm using the latest Ember (3.2). I have made extension of text-area component: app/components/enterable-textarea.js

export default TextArea.extend({
    keyPress(event) {
        if (event.keyCode === 13) {
            console.info('e ', event);
        }
      }
});

I see the debug output in the console once I hit the 'Enter' key.

In my route template I have simple form like:

    <form {{action "save" model.newNote on='submit'}}>
        <div class="form-group">
        <label for="tag">Tag</label>
        {{input type="text" value=model.newNote.tag 
placeholder="#anytag" class="form-control"}}
        </div>  

        <div class="form-group">
        <label for="note">Notepad</label>
        {{enterable-textarea value=model.newNote.note 
rows="6" class="form-control"}}
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Ho do I pass form action to the component or fire the 'submit' event of the form? I need to pass whole form to the route action by pressing the 'Enter'

Gennady Dogaev Gennady Dogaev · Accepted Answer · 2018-07-05T21:11:52

You pass an action as a property and then call it as a function:

export default TextArea.extend({
    onEnter: () => {}, //or function() {},
    keyPress(event) {
        if (event.keyCode === 13) {
            this.get('onEnter')(); //or even this.onEnter();
        }
      }
});

{{enterable-textarea value=model.newNote.note 
    rows="6" class="form-control" onEnter=(action "save" model.newNote)}}

Fire form submit event from custom component

1 Answers