嗨,我遇到了一个非常奇怪的问题,表单组值更改为一个更改订阅了两次. 下面是一些代码片段,它们描述了我正在try 做的事情.不幸的是,由于一些连接,目前无法创建堆栈闪电战. 仅数字-输入组件html文件

<mat-form-field appearance="outline" class="bsl-form-field-input">
  <mat-label>{{ matLabel }}</mat-label>
  <input
    type="number"
    matInput
    [placeholder]="placeHolder"
    [formControl]="formControl"
    autocomplete="off"
    appNumbersOnly
  />
</mat-form-field>

仅数字-输入元件ts文件

import { Component, Input, OnDestroy, OnInit, forwardRef } from '@angular/core';
import {
  FormControl,
  NG_VALUE_ACCESSOR,
  NumberValueAccessor,
} from '@angular/forms';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-numbers-only-input',
  templateUrl: './numbers-only-input.component.html',
  styleUrls: ['./numbers-only-input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumbersOnlyInputComponent),
      multi: true,
    },
  ],
})
export class NumbersOnlyInputComponent
  extends NumberValueAccessor
  implements OnDestroy, OnInit
{
  @Input()
  formControl: FormControl;
  @Input()
  matLabel: string;
  @Input()
  placeHolder: string;

  destroySubject = new Subject<void>();


  ngOnDestroy(): void {
    this.destroySubject.next();
    this.destroySubject.complete();
  }

  ngOnInit(): void {
    this.formControl.valueChanges.subscribe(value=>console.log(value))
  }
}

仅数字指令文件,它只是阻止输入除数字之外的任何字符,并仅允许为有效数字粘贴值.

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

@Directive({
  selector: '[appNumbersOnly]',
})
export class NumbersOnlyDirective {
  regEx = '^[0-9]+$';

  // only numbers are allowed
  @HostListener('keypress', ['$event'])
  onKeyPress(event: KeyboardEvent) {
    return new RegExp(this.regEx).test(event.key);
  }

  // block paste for non numeric values
  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent) {
    const pastedString = event?.clipboardData?.getData('text/plain');
    if (pastedString && !Number.isNaN(+pastedString)) {
      return true;
    } else {
      return false;
    }
  }
}

anyone please help me to resolve this. here is my console enter image description here

推荐答案

您可以使用rxjs来减少调用次数.通过获取唯一值并排除throttleTime之前的多个排放.请在下面找到一个有效的例子!

如果这不起作用,请在下面的闪电战中复制该问题并分享回来!

   ngOnInit(): void {
    this.formControl.valueChanges
      .pipe(
        distinctUntilChanged(),
        throttleTime(500),
        takeUntil(this.destroySubject)
      )
      .subscribe((value) => console.log(value));
  }

stackblitz

Typescript相关问答推荐

如何获取数组所有可能的索引作为数字联合类型?

如何在TypeScript对象迭代中根据键推断值类型?

typescript抱怨值可以是未定义的,尽管类型没有定义

如何通过TypeScript中的工厂函数将区分的联合映射到具体的类型(如类)?

如何在typescript中设置对象分配时的键类型和值类型

ANGLE找不到辅助‘路由出口’的路由路径

如何在Angular 12中创建DisplayBlock组件?

在包含泛型的类型脚本中引用递归类型A<;-&B

使用订阅时更新AG网格中的行

AngularJS服务不会解析传入的Json响应到管道中的模型

为什么ESLint会抱怨函数调用返回的隐式`any`?

无法将从服务器接收的JSON对象转换为所需的类型,因此可以分析数据

在打字应用程序中使用Zod和Reaction-Hook-Forms时显示中断打字时出错

在抽象类构造函数中获取子类型

如何为对象数组中的每个条目推断不同的泛型

无法使用prisma中的事务更新记录

两个接口的TypeScript并集,其中一个是可选的

数据库中的表请求返回如下日期:2023-07-20T21:39:00.000Z 我需要将此数据格式化为 dd/MM/yyyy HH:mm

根据索引将元组拆分为两个块

TS 条件类型无法识别条件参数