如何在<输入 matInput type= "number" > 中输入任何字母或特殊字符时放置正确的错误消息？

Question

>我试图在组件中做

1. min = 0; port: new FormControl('', [this.validatePort(this.min)]),

2. port: new FormControl('', Validators.required)

和在 HTML 中

<mat-form-field class="inputnumber">
  <input matInput type="number" placeholder="Enter Port" formControlName="port" required>
     <mat-error>
            {{errors.port}}
     </mat-error>
</mat-form-field>

我想用一些正确的错误消息限制输入类型号中的字母和特殊字符输入。目前，如果我输入字母或特殊字符无法写入，但想为此显示一些错误消息。

我正在使用角度 7.2.2

Answer 1

这将执行您想要的操作：

在组件中设置FormControl min和max

网页代码：

<mat-form-field class="inputnumber">
  <input matInput type="number" placeholder="Enter Port" [formControl]="port" required>
   <mat-error *ngIf="port.invalid">
     Your Error Message
   </mat-error>
</mat-form-field>

TS 代码：

port = new FormControl('', [Validators.required, Validators.max(15), Validators.min(0)]);

Stackblitz