如果值粘贴在 type=“number” 的输入字段中，则显示错误消息

Question

In my form i have a quantity field which should accept only numeric values. When quantity is entered with special characters that time this type="number" replaces the special characters. But instead of replacing if i paste value with special characters i need to display error message as the "Quantity has invalid characters" and also should reset field value as "".

in html:

<mat-form-field class="quantity">
   <mat-label>Item Quantity</mat-label>
   <input matInput type="number" step="1" [(ngModel)]="quantity" 
   formControlName="itemQuantity" (paste)="checkItemQuantity($event)">
 </mat-form-field>

in ts

checkItemQuantity(event){
    let value = this.form.get('itemQuantity').value ; // if pasted value is 45%^$
    console.log(value); // prints 45
  }

as soon as i enter value with invalid characters in ts i am receiving value as 45 so i am unable to perform validation. Is it possible to capture whatever value is pasted inside field. I couldnt use type="text" as i need step functionality for this field.

Answer 1

You can try validating your FormControl inside your code (ie check if input is valid for type number). Then access the error message of the validation from the view, to get your user information.

look here: Angular Form Validation