angular - 动态按下 Enter 时禁用输入

Question

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

我现在有这个:

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

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

如何在我的 doSomething 中获取此输入字段功能？

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

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

Answer 1

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

@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" />

Demo