檢測輸入返回與反應形式按鈕單擊

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"將阻止基於回車的表單提交。這樣用戶將需要實際點擊按鈕來觸發某些事情。

此外，在您傳遞事件的方法中，以下代碼將檢測它是否由按Enter鍵觸發。

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