Ввод только цифр?

Question

[prolina]

@Directive({
  selector: '[numbersOnly]'
})
export class OnlyNumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initialValue = this._el.nativeElement.value;

    this._el.nativeElement.value = initialValue.replace(/[^0-9]*/g, '');
    if ( initialValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }
}

Имеется данная директива, которая делает возможным ввод только цифр в поле. Но, если задана длина для поля и начать вводить первой - букву, то длина уже станет равной единице(но буквы в инпуте не будет видно), далее если вводить цифру, то длина всё также единица. Также, если имеется поле с количеством символом = максимальной длине, затем убрать один символ и добавить букву, то поле будет валидным. Как эту проблему можно решить?

Answer 1

[Антон Швец]

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[numbers]',
})
export class NumbersDirective  {
  sub = new Subscription();

  constructor(
    private ngControl: NgControl
  ) { }

  ngOnInit() {
    this.sub = this.ngControl.valueChanges.subscribe(value => {
      this.ngControl.control.setValue(
        (value || '').replace(/[^0-9]*/g, ''),
        { emitEvent: false },
      )
    });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}