Angular表单如何通过两个按钮共用一个事件触发提交

实现思路 #

• 声明一个临时变量存储按钮点击后需要执行的后续回调
• 按钮点击时先将自身对应的逻辑写入临时变量，再主动触发表单提交
• 表单提交完成且校验/提交成功后，执行临时存储的回调，执行完清空变量避免重复触发

代码示例 #

模板代码

<!-- 给表单加模板引用，方便组件内获取实例调用提交方法 -->
<ui-form #myForm (submit)="handleFormSubmit()"></ui-form>
<button (click)="handleSaveClick()">save</button>
<button (click)="handleOpenClick()">open</button>

组件逻辑代码

import { ViewChild } from '@angular/core';
// 首先引入你的ui-form组件类型
import { UiFormComponent } from 'xxx';

export class YourComponent {
  // 获取表单组件实例引用
  @ViewChild('myForm') myForm: UiFormComponent;
  // 存储提交完成后要执行的回调
  private afterSubmitCallback: Function | null = null;

  // 表单submit事件绑定的处理函数
  handleFormSubmit() {
    // 这里写你原本的表单提交逻辑，比如表单校验、调用提交接口等
    yourFormSubmitApi().subscribe({
      next: () => {
        // 提交成功后执行预先存储的按钮逻辑
        if (this.afterSubmitCallback) {
          this.afterSubmitCallback();
          this.afterSubmitCallback = null;
        }
      },
      error: () => {
        // 提交失败清空回调，避免误执行
        this.afterSubmitCallback = null;
      }
    })
  }

  handleSaveClick() {
    // 预先把save逻辑存入回调变量
    this.afterSubmitCallback = this.save.bind(this);
    // 主动触发表单提交
    this.myForm.submit();
  }

  handleOpenClick() {
    // 预先把open逻辑存入回调变量
    this.afterSubmitCallback = this.open.bind(this);
    // 主动触发表单提交
    this.myForm.submit();
  }

  save() {
    // 你原本的save按钮业务逻辑
  }

  open() {
    // 你原本的open按钮业务逻辑
  }
}

优化方案（如果ui-form支持） #

如果你的ui-form组件暴露的submit方法本身支持返回Promise/Observable来标识提交状态，可以直接用下面更简洁的写法，不需要额外维护回调变量：

handleSaveClick() {
  this.myForm.submit()
    .then(() => this.save())
    .catch(err => console.log('表单提交失败', err))
}

handleOpenClick() {
  this.myForm.submit()
    .then(() => this.open())
    .catch(err => console.log('表单提交失败', err))
}

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