Angular 5表单多提交按钮时验证未触发问题求助

我太懂你这个困扰了——直接用(click)绑定事件确实会绕开Angular表单的自动验证机制，导致表单还没校验就执行了提交逻辑。下面给你两种实用方案，不管你用的是模板驱动表单还是响应式表单都能搞定：

核心思路 #

Angular的表单验证是和ngSubmit事件深度绑定的，只有通过type="submit"的按钮触发提交，才会自动触发表单的完整验证流程。我们可以利用这一点，通过区分按钮的标识来执行不同的操作。

方案一：模板驱动表单 #

1. 修改模板代码 #

给表单绑定ngSubmit事件，同时给两个提交按钮加上type="submit"和区分用的value属性：

<form #insightForm="ngForm" (ngSubmit)="handleSubmit(insightForm)">
  <!-- 你的表单控件（比如输入框、文本域等） -->
  <input name="title" ngModel required placeholder="请输入标题">
  
  <button type="submit" value="save">保存更改</button>
  <button type="submit" value="publish">发布</button>
</form>

2. 实现组件逻辑 #

在组件里编写提交处理函数，先检查表单有效性；无效的话手动标记所有控件为touched（让验证提示显示出来），有效再根据按钮的value执行对应操作：

handleSubmit(form: NgForm) {
  // 先校验表单是否有效
  if (!form.valid) {
    // 手动触发表单验证，让所有控件的错误提示显示
    Object.keys(form.controls).forEach(controlName => {
      form.controls[controlName].markAsTouched();
    });
    return;
  }

  // 根据点击的按钮执行不同逻辑
  const action = form.submitted.value;
  if (action === 'save') {
    this.saveInsight();
  } else if (action === 'publish') {
    this.publishInsight(); // 替换成你的发布逻辑
  }
}

saveInsight() {
  // 优化原有代码：用箭头函数避免self的上下文问题
  this.insightService.createInsight(this.insight)
    .subscribe(
      result => {
        this.alertService.success("Insight has been created", "", false, false);
      },
      error => {
        this.alertService.validationError(error.error, 'There was a problem creating your insight');
      }
    );
}

publishInsight() {
  // 这里写你的发布逻辑，比如调用发布接口
}

方案二：响应式表单 #

如果用的是响应式表单，思路类似，只是表单绑定方式不同：

1. 修改模板代码 #

<form [formGroup]="insightForm" (ngSubmit)="handleSubmit()">
  <!-- 你的响应式表单控件 -->
  <input formControlName="title" required placeholder="请输入标题">
  
  <!-- 用点击事件记录当前操作类型 -->
  <button type="submit" (click)="setCurrentAction('save')">保存更改</button>
  <button type="submit" (click)="setCurrentAction('publish')">发布</button>
</form>

2. 实现组件逻辑 #

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// ...

insightForm: FormGroup;
private currentAction: string;

constructor(private fb: FormBuilder, private insightService: InsightService) {
  // 初始化响应式表单
  this.insightForm = this.fb.group({
    title: ['', Validators.required],
    // 其他表单控件...
  });
}

setCurrentAction(action: string) {
  this.currentAction = action;
}

handleSubmit() {
  if (!this.insightForm.valid) {
    // 手动标记所有控件为已触摸，显示验证错误
    this.insightForm.markAllAsTouched();
    return;
  }

  // 根据记录的操作执行对应逻辑
  if (this.currentAction === 'save') {
    this.saveInsight();
  } else if (this.currentAction === 'publish') {
    this.publishInsight();
  }
}

// 同样优化saveInsight函数
saveInsight() {
  this.insightService.createInsight(this.insight)
    .subscribe(
      result => {
        this.alertService.success("Insight has been created", "", false, false);
      },
      error => {
        this.alertService.validationError(error.error, 'There was a problem creating your insight');
      }
    );
}

publishInsight() {
  // 你的发布逻辑
}

关键注意点 #

• 一定要用type="submit"的按钮触发ngSubmit，而不是单纯的(click)，这样Angular才会自动处理表单验证流程。
• 当表单无效时，手动标记控件为touched，这样用户能看到对应的验证错误提示，知道哪里没填对。
• 原有代码里的self可以换成箭头函数，避免上下文丢失的问题，代码更简洁。

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