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

我正在建立一个反应形式的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到按钮，但失败了。

来源

2017-06-20 RhoVisions

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

此外，在您传递事件的方法中，以下代码将检测它是否由按Enter键触发。

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

来源

2017-06-20 03:37:43 MichaelSolati

我试图从提交事件中检查'keyCode'，但它出现未定义。此外，点击和'submitSession'运行（点击第一个，然后是'submitSession'）。 – RhoVisions

您是否尝试从按钮中删除'submitSession（）'以及'type =“submit”'？ – MichaelSolati

我会给它一个镜头，但我认为两者在语义上是正确的？这不是Angular的目标吗？ – RhoVisions

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

回答

相关问题