CODEWITHSUNDEEP
javascriptangulartypescript
Dheeraj Khandelwal
Dheeraj Khandelwal

Reputation: 11

(keyup.enter) triggered twice | Angular14

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 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>

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.

Upvotes: 1

Views: 573

Answers (2)

Vignesh
Vignesh

Reputation: 1212

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

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

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56099

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

Upvotes: 1

Related Questions