Директивы Min и Max не работают должным образом в Angular 6

Question

Приветствую разработчиков по всему миру,

Я пытаюсь глубоко понять, как использовать директивы min и max в Angular 6, я знаю о неподдерживаемых изменениях функциональности до Angular 2версии, но теперь я использую версию 6, поэтому она не должна вызывать проблем.

Однако я ожидал, что с помощью средства проверки "max" пользователь не сможет набрать больше 9999 вместоэто поведение, я только запускаю Валидатор, но не останавливаю пользователя, позволяя ему вводить бесконечные числа.

Как мне добиться этого классического поведения "maxlength", но с вводом числа типа?

РЕДАКТИРОВАТЬ

Я использую компоненты PrimeNG

<input class="ss" type="text" [formControl]="numPolizaCtrl" [(ngModel)]="conceptoForm.numPoliza" pInputText pKeyFilter="pint" placeholder="Nº póliza">

<label *ngIf="numPolizaCtrl.invalid" [ngClass] = "'error'" > Too much numbers. </label>

numPolizaCtrl = new FormControl("", [Validators.max(9999999999), Validators.min(0)]);

Я хочу, чтобы пользователь не вводил больше символов "x", то же поведение, что идиректива maxLength, но с использованием ввода типа «число».

Спасибо всем.

Answer 1

Попробуйте использовать регулярные выражения:

HTML:

<input class="ss" type="text" [formControl]="numPolizaCtrl" [(ngModel)]="conceptoForm.numPoliza" pInputText pKeyFilter="pint" placeholder="Nº póliza"(keydown)=validateNumber($event)>

Конец компонента:

  validateNumber(event: KeyboardEvent) {     
    let regEx =  new RegExp('^[0-9]*$');

    if(regEx.test(event.key) || event.key=="Backspace" )
         return true;
    else
         return false;
 }

Answer 2

вы не можете использовать maxlength в input:number, вы используете min и max или использовать это решение:

в вашем HTMLTemplete

 <input id="txtNumber" placeholder="4 character only" (keydown)="isNumberKey($event)"   
        type="text" name="txtNumber" maxlength="4">

и в вашем компоненте

isNumberKey(evt)
        {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
                  return false;
            return true;
        }