Angular中如何触发放置在mat-dialog-actions区域的表单外部提交按钮

问题本质 #

默认情况下，只有<form>标签内部的type="submit"类型按钮才会自动触发Angular表单的ngSubmit事件，放在表单外部的按钮默认不会和表单关联，因此无法触发提交逻辑。

解决方案（2种可选） #

方案1：使用HTML原生表单关联属性（改动最小，推荐）

HTML5支持button的form属性，直接指定按钮关联的表单ID即可，无需改TS逻辑：

• 先删除原表单内部的提交按钮代码（即<button class="btn btn-primary width-100">{{ neworUpdate }} user</button>对应的整段父级div.form-group代码）
• 修改mat-dialog-actions内的提交按钮代码，新增type="submit"和form="kt_form"属性，移除自带的[mat-dialog-close]="true"（避免提交逻辑未执行就直接关闭弹窗）：

<mat-dialog-actions align="end">
  <button
    mat-button
    type="submit"
    form="kt_form"
    cdkFocusInitial
    class="btn btn-primary btn-pointer"
  >
    {{ neworUpdate }} user
  </button>

  <button mat-button mat-dialog-close class="btn btn-primary btn-pointer">
    Cancel
  </button>
</mat-dialog-actions>

• 在你的save方法中，表单提交、数据保存成功后，再调用MatDialogRef的close()方法手动关闭弹窗即可。

方案2：手动调用表单提交事件（兼容性更好）

利用你已经声明的表单模板引用变量#myform="ngForm"，给外部按钮绑定点击事件手动触发提交：

• 同样先删除表单内部的原有提交按钮
• 修改mat-dialog-actions内的提交按钮代码：

<mat-dialog-actions align="end">
  <button
    mat-button
    (click)="myform.ngSubmit.emit()"
    cdkFocusInitial
    class="btn btn-primary btn-pointer"
  >
    {{ neworUpdate }} user
  </button>

  <button mat-button mat-dialog-close class="btn btn-primary btn-pointer">
    Cancel
  </button>
</mat-dialog-actions>

也可以直接绑定(click)="save(myform)"，效果完全一致。

注意事项 #

• 无论使用哪种方案，建议在save方法开头先判断表单合法性：if (form.valid) { 执行保存逻辑 }，避免无效数据提交
• 不要在提交按钮上直接加[mat-dialog-close]属性，避免提交请求失败时弹窗直接关闭，打断用户的编辑操作

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