0

我正在 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 添加到按钮，但失败了。

4

1 回答 1

0

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

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

if (event.keyCode === 13) {
    console.log('you just clicked enter');
}
于 2017-06-20T03:37:43.403 回答