如何使用angular13使enter键按下执行保存

Question

嗨，我正在做angular13，这里我需要允许用户输入正负十进制值，并且它必须限制在.之后的小数点2位。与演示，它可以限制用户在小数点后2位，但当按下进入，我无法执行保存。

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指令：

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

演示

Answer 1

这是因为您的最终if-语句在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;
    }

只需将以下内容添加到其中：&& event.code != 'Enter'

解决方案