在<input matinput =“” type =“ number” />中输入任何字母或特殊字符时,如何显示正确的错误消息?

时间:2019-02-07 12:08:57

标签: angular angular-material

我尝试在组件

  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

1 个答案:

答案 0 :(得分:0)

这将满足您的要求:

在Component.ts中为min设置maxFormControl

HTML代码:

<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