Как правильно указать сообщение об ошибке при вводе любого алфавита или специального символа в?

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

Это будет делать то, что вы хотите:

Установить min и max для FormControl в Component.ts

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