模糊事件处理

Question

我具有模糊功能，可检查输入是否必须包含字母。我在blur事件上触发一个函数以检查验证。我的页脚组件中有一个“下一步”按钮，可将我导航到下一页。

现在，如果我添加了无效的输入（例如：123），然后直接单击“下一步”按钮（没有在输入字段中跳出标签），我将被重定向，而不是显示字段级别的Validation。

有人可以帮助我如何使用JavaScript解决这种情况吗？

我的HTML代码段

<mat-form-field>
      <input autocomplete="offf" matInput [formControlName]="'lastName'" maxlength="30" 
       [placeholder]="'Last Name'" 
      (blur)="checkNameValidation($event , 'lastName')"/>
</mat-form-field>

我的ts文件功能

checkNameValidation(event , element: string) {
var containsAlphabet = /[a-zA-Z]/.test(event.target.value);
if(!containsAlphabet) {
  this.myForm.get(element).setErrors({'invalid': true});
}
}

Answer 1

您可以尝试

• 禁用提交按钮，直到所有表单字段都通过

• 如果表单的任何表单字段验证失败

Answer 2

在这种特定情况下，您应该使用keydown事件。这将帮助您捕获该字段上发生的所有键盘。

使用下面的链接以获得更多参考

https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event