Question

我有一个输入类型，我希望它只允许使用离子3的maxLenght限制数字。

我试过这个：

<input type="tel" maxlength="5" class="correos-custom-input {{isEmpty}}" [disabled]="isPCVerified" [(ngModel)]="postalCode">

这允许我用maxLenght写数字和字母。

<input type="number" maxlength="5" class="correos-custom-input {{isEmpty}}" [disabled]="isPCVerified" [(ngModel)]="postalCode">

并且这只是数字，但具有无限长度，因为maxlenght仅支持类型文本和电话。

感谢您的帮助。

Answer 1

试试这个

<input type="tel" maxlength="5" inputmode="numeric" pattern="^[0-9]*$" class="correos-custom-input {{isEmpty}}" [disabled]="isPCVerified" [(ngModel)]="postalCode">

inputmode会告诉输入显示设备上的数字键盘，pattern是预期条目的正则表达式，在这种情况下只是数字。

希望这有帮助。

Answer 2

您可以使用Angular Form Validators。对于您的号码问题，您只需将其更改为文本，然后在模块中，在保存之前转换为数字。

另一个选项是创建自己的验证器并从当前的数字验证器扩展它并添加自己的长度检查。我发现此article作为电子邮件的示例，但可以轻松修改以添加长度检查。

另一个创建自己的custom validator

的好例子

Answer 3

我在离子1和3中使用了相同的方法。请尝试。

.html文件

<ion-input type="tel" maxlength="10" [(ngModel)]="telNumber" (keyup)="iskeyUpNumber($event)"></ion-input>

.ts文件

iskeyUpNumber(evt)
{
   this.telNumber= isNaN(this.telNumber) ? this.telNumber.slice(0, -1)  : this.telNumber.trim();
}

输入类型仅允许数字和maxLength

3 个答案: