Angular 4表单无效时无法阻止回车键提交表单的问题咨询

当然可以实现！你的问题核心在于：虽然提交按钮被禁用了，但回车键会直接触发表单的ngSubmit事件，而这个事件不会检查按钮的禁用状态。下面给你几种简单有效的解决方案，结合你的代码来调整：

方案一：在ngSubmit事件中直接校验表单有效性 #

直接修改表单的ngSubmit绑定逻辑，只有当表单有效时才执行提交方法：

<form class="dialog-form" novalidate #areaForm="ngForm" (ngSubmit)="areaForm.form.valid && onSubmit()">

这样一来，即便按下回车键触发了ngSubmit，只要表单处于无效状态，onSubmit()就不会被执行。

方案二：改用type="submit"按钮（更符合Angular表单最佳实践） #

你当前的提交按钮是type="button"，这会绕过浏览器默认的表单提交校验。把它改成type="submit"，并移除按钮上的(click)绑定，让表单的ngSubmit来处理提交逻辑：

<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="true" (click)="onCancel()"> Cancel </button>
  <button mat-button color="primary" type="submit" [disabled]="areaForm.form.invalid"> 
    {{data.buttonText}} 
  </button>
</mat-dialog-actions>

同时保持你已经写好的onSubmit()校验逻辑：

onSubmit() {
  if (this.areaForm.form.valid) {
    this.dialogRef.close(this.areaForCreation);
  }
}

这种方式下，当按钮被禁用时，浏览器会自动阻止回车键触发表单提交，完全符合你的需求。

方案三：监听回车键并阻止无效时的默认行为 #

如果不想修改按钮类型，可以在表单上监听回车键事件，当表单无效时阻止默认提交动作：

<form class="dialog-form" novalidate #areaForm="ngForm" (ngSubmit)="onSubmit()" (keydown.enter)="handleEnter($event, areaForm)">

然后在组件类中添加处理方法：

handleEnter(event: KeyboardEvent, form: NgForm) {
  // 表单无效时阻止回车键的默认提交行为
  if (!form.form.valid) {
    event.preventDefault();
  }
}

这三种方案都能解决你的问题，其中方案二更推荐，因为它遵循了Angular表单的原生行为，代码也更简洁。

内容的提问来源于stack exchange，提问作者TDC