从自定义组件触发表单提交事件

Question

我使用的是最新的 Ember (3.2)。我已经扩展了 text-area 组件： app/components/enterable-textarea.js

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

我在按下 'Enter' 键后在控制台中看到了调试输出。

在我的路线模板中，我有如下简单的形式：

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

如何将表单操作传递给组件或触发表单的 'submit' 事件？我需要通过按 'Enter'

将整个表单传递给路由操作

Answer 1

您将动作作为属性传递，然后将其作为函数调用：

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

ember.js