Min Maxlength 属性在 ionic 3 中不起作用答案

【问题标题】：Min Maxlength property not working in ionic 3Min Maxlength 属性在 ionic 3 中不起作用
【发布时间】：2018-06-19 13:00:07
【问题描述】：

我得到了一个类型为数字的离子输入，我尝试了所有可能的方法将其最小长度设置为 6，但没有运气。我还有一个十进制输入字段，我想在该字段上验证该点之前的数字应该是 3 个数字，点后应该是 2 个数字。下面是我尝试过的代码。

<ion-label floating>Pin code</ion-label>
<ion-input type="number" name="pincode" [max]="maxPin" ngModel required>
</ion-input>

【问题讨论】：

你能不能给个更清楚的解释
我需要用户不能添加超过 6 个数字的密码。

标签： ionic-framework ionic2 ionic3

【解决方案1】：

对于那些仍在为这个问题苦苦挣扎的人。由于元素属性 type='number' 似乎 maxLength 不起作用，如果您想限制字符的长度，请改用 type='tel'。 - 希望有帮助..

【讨论】：

【解决方案2】：

你的html

    <form [formGroup]="myForm">

    <ion-item>
            <ion-label stacked>Pin Code</ion-label>
            <ion-input type="number" maxlength="6" [(ngModel)]="pincode" formControlName="pincode">
            </ion-input>
    </ion-item>
<form>

你的 ts 文件

import { FormBuilder,Validators } from '@angular/forms';


export class DemoForm{
myForm:any;
constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public formBuilder: FormBuilder){
this.myForm = formBuilder.group({
          pincode: ['', Validators.compose([Validators.minLength(6),  Validators.required])],

    })

}

【讨论】：

什么是我的表单？
这不起作用，请评论完整的代码。

【解决方案3】：

对于PIN码输入，我们可以使用这种方法：

<ion-label floating>Pin code</ion-label>
<ion-input type="number" name="pincode" max="999999" min="100000" ngModel required>
</ion-input>

这会将输入限制为最小和最大 6 位数字。 "maxlength" 不适用于 number 类型，然后我们使用 'max' 和 'min' 来限制数字输入。

【讨论】：

【解决方案4】：

我们可以手动设置最小和最大数量。

<ion-input type="number" min="0" max="5"></ion-input>

【讨论】：

请在提交答案前进行测试