When I try to submit the form on click then it is working fine but when I try to submit my form on keyup.enter then this triggered twice.

Button (click) works as expected however on (keyup.enter) increment function is triggered twice.

When I press Tab enter on keyboard (keyup.enter) and (click) both events are triggered which is calling the function twice Here is my HTML code:

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

            <div >
                <mat-form-field>
                    <input matInput type="search" placeholder="Search Claim/Last Name" 
                        [(ngModel)]='claimNum'  [ngModelOptions]="{standalone: true}" (keyup)="EnableDisableFields()">
                </mat-form-field>
            </div>
            <div  [ngClass]="{'formGroup': dobsearchrange, 'disabled': !dobsearchrange}">
                <mat-form-field>
                    <input matInput [matDatepicker]="pickerDateClaim" placeholder="Search DOB" 
                        [(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  [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  [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>

and this is .ts file:

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

}

Please let me know if any solution is there. I want my form to submit on mouse click or if user tries to click enter, on mouse click event is trigged only once but on pressing enter it is triggered twice.

CodePudding user response：

Don't waste your time writing a special event for this functionality, it already inbuild in html, just add a button of type submit and on filling the form and enter press, the form will autosubmit!

Note this will work only when the focus in on an input element!

forked stackblitz

CodePudding user response：

Can you try ngSubmit that might solve the issue which is prebuilt with angular

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