how to make enter key press perform save using angular13

Question

Hi i am working on angular13, here i need to allow user for both positive and negative decimal values to enter and it must limit to 2 decimal places after . . with the demo, it is able to limit users to 2 places after decimal but when pressed on enter, i am not able to perform save.

HTML:

<form [formGroup]="eoInfoForm" (ngSubmit)="save()">
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="">Amount <span class="text-danger">*</span></label>
        <input
          type="text"
          class="form-control"
          placeholder="Amount in dolars"
          formControlName="amount"
          autocomplete="off"
          currencyInput
          [ngClass]="{
            'is-invalid': eoInfo.amount.dirty && eoInfo.amount.invalid
          }"
        />
      </div>
    </div>
  </div>
  <button type="submit">Save</button>
</form>

TS Directive:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[currencyInput]',
})
export class CurrencyInputDirective {
  private el: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }

  @HostListener('keypress', ['$event'])
  onkeypress(e: any) {
    let event = e || window.event;
    if (event) {
      return this.allowPositiveNegativeWithTwoDecimal(event);
    }
  }

  allowPositiveNegativeWithTwoDecimal(event: any): any {
    let charCode = event.which ? event.which : event.keyCode;
    let val = event.target.value.split('.');
    let index = event.target.value.indexOf('.');
    let minusSplitVal = event.target.value.split('-');

    if (
      charCode == 45 &&
      event.target.selectionStart == 0 &&
      (minusSplitVal.length == 1 ||
        event.target.selectionEnd == event.target.value.length)
    ) {
      return;
    }
    if (
      event.target.selectionStart == 0 &&
      minusSplitVal.length > 1 &&
      event.code != 'Delete'
    ) {
      event.preventDefault();
      return false;
    }
    if (
      charCode != 46 &&
      !(charCode == 37 && event.code == 'ArrowLeft') &&
      !(charCode == 39 && event.code == 'ArrowRight') &&
      charCode > 31 &&
      (charCode < 48 || charCode > 57) &&
      !(charCode == 97 && event.ctrlKey == true) &&
      event.code != 'Delete'
    ) {
      event.preventDefault();
      return false;
    }
    if (
      (charCode == 37 && event.code == 'ArrowLeft') ||
      (charCode == 39 && event.code == 'ArrowRight') ||
      (charCode == 97 && event.ctrlKey == true)
    ) {
      return;
    }
    if (charCode == 46 && val.length > 1 && event.code != 'Delete') {
      event.preventDefault();
      return false;
    }
    if (event.target.selectionStart < event.target.selectionEnd) {
      return;
    }
    val[0] = val[0].replace('-', '');
    if (
      val[0].length >= 10 &&
      charCode != 46 &&
      (index < 0 || event.target.selectionStart <= index) &&
      event.code != 'Delete' &&
      event.code != 'Backspace' &&
      event.code != 'Tab'
    ) {
      event.preventDefault();
      return false;
    }
    if (
      val.length > 1 &&
      val[1].length == 2 &&
      event.target.selectionStart > index &&
      event.code != 'Delete' &&
      event.code != 'Backspace' &&
      event.code != 'Tab'
    ) {
      event.preventDefault();
      return false;
    }
  }

  @HostListener('keyup.enter', ['$event.target.value'])
  onEnter(value: any) {
    return value;
  }
}

DEMO

Answer 1

This is because your final if-statement is being hit on enter.

if (
      val.length > 1 &&
      val[1].length == 2 &&
      event.target.selectionStart > index &&
      event.code != 'Delete' &&
      event.code != 'Backspace' &&
      event.code != 'Tab'
    ) {
      event.preventDefault();
      return false;
    }

Just add this to it: && event.code != 'Enter'

solution