Пользовательские валидаторы Angular 6, как запретить пользователю добавлять специальные символы, такие как + или -, для ввода числа

Question

Я сделал угловые 6 пользовательских валидаторов, чтобы проверить, вводил ли пользователь 3 требуемые цифры или нет. Вот мой вклад:

<mat-form-field appearance="outline" color="warn">
     <mat-label>Last 3 digits</mat-label>
     <input matInput type="text" formControlName="last_three_digits" placeholder="Last 3 digits">
</mat-form-field>&nbsp;

А вот как я заявляю это в реактивной форме:

  'last_three_digits': new FormControl('', [Validators.required, validatePositiveNotNull, validateLengthThree])

Я пытался добавить Validators.pattern("[0-9 ]*"), но он продолжает позволять пользователю добавлять - или + или = или /.

Мне просто нужно строго указать количество длины = 3.

Вот сценарий:

export function validateLengthThree(control: AbstractControl)
{
  if(control.value==null || control.value==undefined)
  {
    return { validPositive: true}
  }
  else if(control.value.length<3 && control.value!=null && control.value!=undefined)
  {
    return { validPositive: true}
  }
  else if(control.value.length>3)
  {
    return { validPositive: true}
  }
  return null;
}

Я пытался изменить тип ввода на number, но все равно.

Я использовал этот шаблон /^\d+$/ из этого ответа в стеке, и ввод все еще принимает специальные символы и проверяет форму.

P.S. Я добавил условия null и undefined в свои пользовательские валидаторы, потому что, когда я фокусируюсь на этом входе, и пока он пуст, он выдает ошибку, говоря, что он не может работать с нулевыми значениями.

Answer 1

используйте директиву на вашем входе, чтобы предотвратить нажатие клавиши

107 = "+"

109 = "-"

111 = "/"

187 = "="

<input keysban="[107,109,111,187]" type="text">

директива

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[editable]'
})
export class EditableDirective {
  @Input() keysban: number[];

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    // check banned key
    if (this.keysban) {
      if (this.keysban.indexOf(event.keyCode) > -1) {
        event.preventDefault();
      }
    }
    console.log(event.keyCode);
  }

  constructor() { }

}

не забудьте добавить свой валидатор максимальной длины