如何使用Angular13进行输入密钥按下保存

Question

嗨，我在Angular13上工作，在这里，我需要允许用户以正数和负小数值的输入，并且必须限制为。之后的2个小数点。。使用该演示，它可以将用户限制在十进制后的2个位置，但是按Enter按Enter，我无法保存。

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

demo

Answer 1

这是因为您的最终IF statement在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;
    }

只需将其添加到它：
＆amp;＆amp; event.code！='enter'

解决方案