(keyup.enter)触发两次\x- Angular14

Question

当我尝试在点击上提交表单时，它运行良好，但是当我尝试在keyup.enter上提交表单时，它触发了两次。

按钮(单击)按预期工作，但是(keyup.enter)增量函数被触发两次。

当我按Tab + enter on键盘(keyup.enter)和(单击)时，这两个事件都会被触发，这是两次调用函数，这里是我的HTML代码：

<form action="" (keyup)="handleKeyUp($event)">
    <div class="row">
        <div class="row col-md-10">
            <div class="col-md-3">
                <mat-form-field>
                    <input matInput type="search" placeholder="Search External ID" class="search-input"
                        [(ngModel)]='searchExtId'  [ngModelOptions]="{standalone: true}" (keyup)="EnableDisableFields()">
                </mat-form-field>
            </div>

            <div class="col-md-3">
                <mat-form-field>
                    <input matInput type="search" placeholder="Search Claim/Last Name" class="search-input"
                        [(ngModel)]='claimNum'  [ngModelOptions]="{standalone: true}" (keyup)="EnableDisableFields()">
                </mat-form-field>
            </div>
            <div class="col-md-3" [ngClass]="{'formGroup': dobsearchrange, 'disabled': !dobsearchrange}">
                <mat-form-field>
                    <input matInput [matDatepicker]="pickerDateClaim" placeholder="Search DOB" class="search-input"
                        [(ngModel)]='DOB'  [ngModelOptions]="{standalone: true}" [disabled]="!dobsearchrange">
                    <mat-datepicker-toggle matSuffix [for]="pickerDateClaim"></mat-datepicker-toggle>
                    <mat-datepicker #pickerDateClaim></mat-datepicker>
                </mat-form-field>
            </div>

            <div class="col-md-3" [ngClass]="{'formGroup': dobsearchrange, 'disabled': !dobsearchrange}">
                <mat-form-field>
                    <input type="text" matInput ngxDaterangepickerMd [(ngModel)]="selected"  [ngModelOptions]="{standalone: true}"
                        [showCustomRangeLabel]="true" [showRangeLabelOnInput]="true" [alwaysShowCalendars]="true"
                        [ranges]="ranges" [linkedCalendars]="true" [showClearButton]="false"
                        (datesUpdated)="datesUpdated($event)" placeholder="Select Service Date" opens="left"
                        [disabled]="!dobsearchrange" />
                </mat-form-field>

            </div>

        </div>
        <div class="col-md-2" [ngClass]="{'formGroup': dobsearchrange, 'disabled': !dobsearchrange}">
            <button mat-raised-button color="primary" (click)="GetTableData()" [disabled]="!dobsearchrange"
                style="margin-top:12px;line-height: 25px;">Get Data</button>
            <button mat-raised-button color="primary" type="button" (click)="ClearData()"
                [disabled]="!dobsearchrange"
                style="margin-top:12px;margin-left:10px;line-height: 25px;">Clear</button>
        </div>
    </div>
</form>

这是.ts文件：

handleKeyUp(evn: any) {
if ((this.searchExtId != "" || this.claimNum != "") && evn.keyCode === 13) {
  this.GetTableData();
}
if(evn.keyCode === 27){
  this.ClearData();
}

}

public GetTableData() {
this.claimService.getClaimTableDetails(this.searchExtId, this.claimNum, date, this.startDate, this.endDate)
  .subscribe(res => {
    
    if (config.externalId != null) {
      this.response = config;
      this.dataSource = new MatTableDataSource(this.response.claimDetails);
      this.dataSource.paginator = this._paginator;
      this.refreshDate = this.pipe.transform(this.response.dataRefreshDate, 'MM/dd/yyyy HH:mm');
    }
    else {
      this.hideloader = false;
      this.dataSource = new MatTableDataSource();
    }
  });

}

如果有什么解决办法，请告诉我。我希望我的表单提交鼠标单击或如果用户尝试单击enter，鼠标单击事件只触发一次，但在按回车时，它会被触发两次。

Answer 1

不要浪费时间为这个功能编写一个特殊的事件，它已经内置到html中，只需添加一个submit类型的按钮，并在填写表单并输入按下，表单将自动提交！

注意，只有当焦点集中在输入元素上时，这才能工作！

叉式堆栈闪电战

Answer 2

你能尝试一下ngSubmit来解决预先构建的角问题吗？

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">