如何在有效表格中只输入3位数字

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)]]