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');
}

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

1 个答案: