Question

能不能告诉我当用户仅输入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)]],

    });

Answer 1

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

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

我为您的示例添加了分叉，您可以查看以下示例： StackBlitz

Answer 2

使用Validator.min和Validator.max

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

如何只输入有效形式的3位数字？

2 个答案: