onkey down event handler

[dedlfix]

Tach!

Leider habe das Ganze mit Angular am Start, und hier ist eine Doppel-Bindung zwischen dem Input und der Varíablen möglich und vorhanden.

Übrigen dieser Code klappt, bis auf das Autorepeat:

window.addEventListener('keyup', (event:KeyboardEvent )=>
{this.keyValue = event.key;
  if (parseInt( this.keyValue) >=  0 && parseInt( this.keyValue) <= 9 )
      { /*Eingabe OK*/ }
  else 
      {this.A = this.A.replace( event.key,"");} // Löscht das letzte Eingeabezeichen.
}

Sich an das window-Objekt zu hängen ist eigentlich nicht der Angular-Weg. Sollen wirklich nach Aufruf dieses Codes in der gesamten Anwendung Tastendrucke gefiltert werden? Falls das nur auf bestimmte Input-Elemente angewendet werden soll, ist der Einsatz einer Directive besser.

@Directive({
    selector: '[input-restriction]'
})
export class InputRestriction {
    constructor(private element: ElementRef) {}

    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        if (event.key == 'a') {
            event.preventDefault();
        }
    }
}

Anwendungsbeispiel:

@Component({
    selector: 'test',
    templateUrl: './test.component.html'
})
export class TestComponent {
    formControl: FormControl;

    constructor() {
        this.formControl = new FormControl('');
        this.formControl.valueChanges.subscribe(console.log);
    }
}

Ausschnitt aus test.component.html:

    <label>No-a's Arc
        <input [formControl]="formControl" input-restriction>
    </label>

Die InputDirective filtert derzeit alle a aus. Sie ist ausbaufähig, zum Beispiel, dass man Parameter übergeben kann, was gefiltert werden soll.

dedlfix.