动态按下 Enter 时禁用输入

Question

我正在制作一个网站，其中会有很多输入字段。有点像扫描仪，我想在按下 Enter 时禁用每个输入。

我现在有这个：

<input (keyup.enter)="doSomething()"/>

但我想传递输入本身，以便我可以禁用这些输入。（例如：doSomething(input) { input.attr.disabled = true; }

如何在我的doSomething函数中获取此输入字段？

注意：我不想使用类似的东西，<input #input ...因为我有很多输入字段。这只会产生大量的工作。

我想要的是每次在输入字段中按下回车键时，它都会被禁用（仅使用一个功能）。

Answer 1

创建一个监听keyup.enter输入的指令，然后在输入上设置 disabled 属性。这可以通过这样的指令来完成：

@Directive({
  selector: 'input[disable-on-enter]',
})
export class DisableOnEnterDirective {
  @HostBinding('attr.disabled') isDisabled;
  @HostListener('keyup.enter') disableInput() {
   this.isDisabled = true ;
  }
}

它可以像这样使用：

<input disable-on-enter placeholder="Press enter to disable" />

演示