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

Question

在我的表单中，我有一个数量字段，它应该只接受数值。 当使用特殊字符输入数量时，此 type="number" 将替换特殊字符。 但是，如果我用特殊字符粘贴值而不是替换，我需要将错误消息显示为“数量有无效字符”，并且还应该将字段值重置为“”。

在 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>

在 ts

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

一旦我在 ts 中输入带有无效字符的值，我就会收到 45 的值，所以我无法执行验证。 是否可以捕获粘贴在字段中的任何值。 我不能使用 type="text" 因为我需要该字段的步骤功能。

Answer 1

您可以尝试在代码中验证您的 FormControl（即检查输入是否对类型号有效）。 然后从视图中访问验证的错误消息，以获取您的用户信息。

看这里： Angular 表单验证