Disable input when enter is pressed dynamically

Question

I'm making a website where there will be a lot of input fields. Sort of like a scanner, I would like to disable each input when the enter is pressed.

I now have this:

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

But I would want to pass along the input itself so I can disable these inputs. (f.e. something like: doSomething(input) { input.attr.disabled = true; }

How can I get this input field in my doSomething function?

Note: I do not want to use something like <input #input ... since I have so many input fields. This will only create a lot of work.

All I want is that each time the enter is pressed in an input field, that it gets disabled (using only one function for all).

Answer 1

Create a directive that listens for the keyup.enter on the input and then sets the disabled attribute on the input. This can be done with a directive like this:

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

And it can be used like this:

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

Demo