最小和最大指令在 Angular 6 中无法按预期工作

Question

问候世界各地的开发者，

\n\n

我试图深入了解如何在 Angular 6 中使用“min”和“max”指令，我知道 Angular 2 版本之前不支持的功能更改，但现在我使用的是版本 6，所以应该不造成麻烦。

\n\n

然而，我期望使用“max”验证器，阻止用户输入超过 9999，而不是这种行为，我只触发验证器，但不停止用户，允许他们输入无限的数字。

\n\n

如何在输入数字类型的情况下实现这种经典的“maxlength”行为？

\n\n

编辑

\n\n

我正在使用 PrimeNG 组件

\n\n

<input class="ss" type="text" [formControl]="numPolizaCtrl" [(ngModel)]="conceptoForm.numPoliza" pInputText pKeyFilter="pint" placeholder="N\xc2\xba p\xc3\xb3liza">\n\n<label *ngIf="numPolizaCtrl.invalid" [ngClass] = "\'error\'" > Too much numbers. </label>\n\nnumPolizaCtrl = new FormControl("", [Validators.max(9999999999), Validators.min(0)]);\n

\n\n

我想阻止用户输入超过“x”个字符，与 maxLength 指令的行为相同，但使用“number”类型的输入。

\n\n

谢谢你们。

\n

Answer 1

您不能maxlength在input:number使用min和/max或使用此解决方案时使用：

在你的 HTML 模板中

 <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;
        }