最小和最大指令在 Angular 6 中没有按预期工作答案

【问题标题】：Min and max directives not working as expected in Angular 6最小和最大指令在 Angular 6 中没有按预期工作
【发布时间】：2019-03-26 18:30:33
【问题描述】：

向世界各地的开发者致敬，

我正在尝试深入了解如何在 Angular 6 中使用“min”和“max”指令，我知道 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 指令的行为相同，但使用的是“数字”类型的输入。

谢谢大家。

【问题讨论】：

请向我们展示相关的标记/代码。
是的，对不起@ConnorsFan，问题现已更新

标签： angular forms frontend

【解决方案1】：

你不能在input:number 中使用maxlength 你使用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;
        }

【讨论】：

抱歉，这不是我要的...我已经使用验证器来触发真假验证，就像您在“isNumberKey()”方法中所做的那样，问题是我不知道如何阻止用户在输入中TYPING 超过 10 个数字。谢谢@puntanet
如果你使用 maxlength="10" 用户最多可以输入 10 位数字
哇，伙计，我尝试了 5 次，但没有成功，但我又试了一次，现在可以了，是的！谢谢你。所以答案是使用 maxlength 和 minlenght 来限制用户输入更多内容，并使用 "min" 和 "max" 的验证器进行代码逻辑。

【解决方案2】：

尝试使用正则表达式：

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

【讨论】：