Angular响应式表单单个输入控件时ngSubmit失效，提交触发页面刷新

修复步骤 #

• 确认<form>元素已正确绑定响应式表单实例：

  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  

  这里的profileForm是你在组件类中创建的FormGroup实例，必须确保两者关联正确。

• 若绑定无误仍出现重载，在提交方法中显式阻止默认行为：
  组件类中修改提交函数：

  onSubmit(event: Event) {
    event.preventDefault();
    // 执行你的表单处理逻辑，比如打印表单值
    console.log(this.profileForm.value);
  }
  

  模板中传递事件参数：

  <form [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">
  

问题根源 #

Angular的ngSubmit本会自动拦截表单默认提交行为，但当表单未正确绑定formGroup，或提交逻辑出现未捕获异常时，默认行为可能被触发。显式调用event.preventDefault()可以强制阻止页面重载。

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