如何只接受 Angular 中输入的最大长度为 5 的数字？

Question

我有一个输入字段类型数字，我想实现以下场景。

值长度应小于 5。（最大长度 5）
如果以上条件只为真，提交按钮将启用。

有人可以帮我解决这个问题吗？

.ts

 public searchForm: FormGroup = new FormGroup({
    zip: new FormControl("",[Validators.required,Validators.pattern(/^-?(0|[1-9]\d*)?$/), Validators.maxLength(5)]),
  });

.html

<form [formGroup]="searchForm">
          <div class = "form-group">
             <input class="form-control form-text-input" type="number" name="zip" 
              formControlName="zip" id="zip" placeholder="Enter a Zip Code" />
          </div>

          <button (click)="myFunction(myModal)" class="btn search-btn mb-1" 
           type="button [disabled]="searchForm.invalid">Search
          </button>
</form>

Answer 1

maxLength 在 <input type="number"> 上被忽略读： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-

您可以使用 max 验证器强制最大长度为 5

因此您的 .ts 将如下所示。

 public searchForm: FormGroup = new FormGroup({
    zip: new FormControl("",[Validators.required,Validators.pattern(/^-?(0|[1-9]\d*)?$/), Validators.max(99999)]),
  });

更新

解决此问题的另一种方法是如果 type=number 在您的用例中不是强制性的，则删除 type=number。然后，您已经在使用的 Regex 将为您进行验证，如果用户未输入 number

，它将 disable 按钮

如何只接受 Angular 中输入的最大长度为 5 的数字？

How to accept only numeric numbers which has maximum 5 length for an input in Angular?

angular

maxlength

form-control

angular-validation

更新