Angular响应式表单在Bootstrap模态框中提交事件失效排查

核心问题1：响应式表单未绑定formGroup #

你的模板中<form>标签仅添加了(ngSubmit)事件，但没有绑定组件中定义的表单组实例，导致Angular无法关联formControlName对应的控件——这就是控制台报错Cannot find control with name: 'name'和Cannot find control with name: 'city'的根本原因，同时也会导致ngSubmit事件无法触发。

核心问题2：提交按钮未指定type="submit" #

你使用的是普通按钮，没有设置type="submit"，Angular无法识别它是表单提交的触发元素，这也是ngSubmit不执行的关键原因之一。

修复步骤 #

1. 在组件模板的<form>标签上添加表单组绑定：

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

2. 将提交按钮的类型改为submit：

<button type="submit" class="btn btn-primary">Submit</button>

验证效果 #

修改完成后，表单控件会正确关联到表单组，控制台的找不到控件错误会消失；点击提交按钮时，onSubmit()方法会正常触发，弹窗验证也能正常显示。

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