以反应形式检测输入与按钮单击的返回

Question

我正在 Angular 中构建一个反应式表单，上面有 3 个提交按钮。

<form [formGroup]="sessionForm" (submit)="submitSession($event)">
    <div class="row">
        <label>
            <span>Title</span>
            <input type="text" formControlName="title" [class.required]="markRequired.indexOf('title') >= 0">
        </label>
    </div>
    ... more fields ...
    <div *ngIf="!admin" class="row">
        <button type="submit" (click)="setBtnClicked('submit')" class="btn btn-primary">Submit</button>
    </div>
    <div *ngIf="admin" class="row">
        <button type="submit" (click)="setBtnClicked('save')" class="btn btn-primary">Save</button>
        <button type="submit" (click)="setBtnClicked('approve')" class="btn btn-success">Save and approve</button>
        <button type="submit" (click)="delete($event, false)" [hidden]="confirmDelete" class="btn btn-danger">Delete</button>
        <button type="submit" (click)="delete($event, true)" [hidden]="!confirmDelete" class="btn btn-danger">Are you sure?</button>
    </div>
    <div [hidden]="!showSuccess" class="msgBox msgBox-success">Your session has been submitted! It will need to be approved before it is listed.</div>
</form>

在每个按钮上，我都附加了一个 (click) 处理程序，它触发一个函数来跟踪哪个按钮被点击：

setBtnClicked(value) {
    this.btnClicked = value;
}

但是，当有人点击输入时，我注意到this.btnClicked 的值等于表单中的第一个按钮。

我不确定如何跟踪用户何时点击返回或何时点击按钮，因此我可以做出不同的响应，或者我的结构是否错误。我想在任何提交时触发submitSession 函数，无论是返回还是按钮。我确实尝试将 formControl 添加到按钮，但失败了。

Answer 1

因为您使用的是表单，所以在输入时按 Enter 应该会运行与表单绑定的 submitSession() 方法，但它可能会默认为表单上的第一个提交按钮。也许从按钮中删除submitSession() 和type="submit" 将阻止基于输入的表单提交。这样用户就需要实际点击一个按钮来触发某些东西。

同样在您传入事件的方法中，以下代码将检测它是否是由按回车键触发的。

if (event.keyCode === 13) {
    console.log('you just clicked enter');
}