如何以有效形式仅输入 3 位数字？答案

【问题标题】：how to enter only 3 digit number in valid form?如何以有效形式仅输入 3 位数字？
【发布时间】：2018-12-27 23:57:42
【问题描述】：

你能告诉我当用户只输入 3 位数字（不是字母）时如何验证表格，那么它是有效的表格，否则无效。我尝试使用 maxength 和 minlength 但不工作。这是我的代码 https://stackblitz.com/edit/angular-cttwtq?file=src%2Fapp%2Fapp.component.ts

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: ['', [Validators.required , Validators.minLength(3),Validators.minLength(3)]],

    });

【问题讨论】：

Angular 4 Form Validators - minLength & maxLength does not work on field type number的可能重复
使用npmjs.com/package/numeric-formatter.. 它将阻止用户输入超过长度的数字

标签： javascript angular

【解决方案1】：

您将输入设置为数字类型，因此最小和最大长度不起作用。您必须将其更改为文本并添加模式验证，例如：

this.paymentForm = this.fb.group({
 cardname: [null, Validators.compose([Validators.required, Validators.minLength(3), 
 Validators.maxLength(3), Validators.pattern('[0-9]+')])],
});

我分叉了你的例子，你可以看看： StackBlitz

【讨论】：

作为建议，您可以删除 Validators.minLength(3) 和 Validators.maxLength(3)，然后将模式更改为 '^[0-9]{3}$'
@ChrisForrence，您可以做很多事情，当然，有时您希望更多地区分错误，而无需自定义有效。这不是我的问题，所以我不知道他最终要达到什么目标。所以我刚刚解决了他的问题，从这里他可以继续改进。谢谢朋友。

【解决方案2】：

使用 Validator.min 和 Validator.max

cardname: ['', [Validators.required , Validators.min(100),Validators.max(999)]]

【讨论】：

太棒了！但是我们如何验证像 056 这样的数字呢？
提醒一下，如果数字以 0 开头，这将无法解决问题（例如“007”）
如果你想验证0XX，作为字符串，唯一的方法是使用正则表达式，但是你失去了本机限制的优势，只让用户输入数字，如果你想要一个数字，7与 007 相同，可以使用 min(0)。